Feb 16, 2012

HTML5 & CSS3 Toggle slideup and slidedown | NO JAVASCRIPT

While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5.

html5-css3

To achieve this we will have to know the pseudo element :Target.

Target element takes the href value and finds the element with its ID(value).

In this tutorial I am going to take the CSS3 styling from Tympanus and add my CSS3 function of toggle.

So here is the HTML structure

[html]
<div class="container">
<section>
<div id="container_buttons">
<h1>
HTML5 & CSS3 Toggle slideup and slidedown using NO JAVASCRIPT.
</h1>

<div style="clear:both"></div>
<ul>
<li class="toggle">
<a href="#One">A clock made in CSS3 | NO Javascript</a>
<p id="One">
Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://webstutorial.com/css3-clock/css3">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
<p id="Two">
Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-2/framework">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
<p id="Three">
This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-1/framework">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
<p id="Four">
Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
<p id="Five">
What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Read more...</a>
</p>
</li>
</ul>

<em style="float: right;margin:10px 0;">Credits: <a href="webstutorial.com">WebsTutorial</a> & <a href="http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/" rel="nofollow" target="_blank">Tympanus</a></em>

</div>
</section>
</div>
[/html]

Here we are making a simple unordered list structure, each list consits an anchor tag and a paragraph tag. Anchor will have a href pointing to ID of a paragraph tag.

And the final CSS to toggle the paragraph tag is

[css]
li p {
display: none;
padding: 10px 20px;
}

li p:target{
display:block;
}
[/css]

11 comments :

  1. Ha! This is a great techinque!

    ReplyDelete
  2. [...] previous tutorial on CSS3 toggle, in this also we will use pseudo element [...]

    ReplyDelete
  3. [...] and CSS3 [Tutorial]Tutorial For A CSS3 Animated Hover EffectItem Blur Effect with CSS3 and jQueryHTML5 & CSS3 Toggle slideup and slidedown without JavaScriptHow to Create Login Form with CSS3 and jQueryFullscreen Background Image Slideshow with CSS3CSS3 [...]

    ReplyDelete
  4. Cool, shared at here : 
    http://www.deluxextreme.com/web-design/html5-and-css3-toggle-slideup-and-slidedown

    ReplyDelete
  5. I like the style and the technique behind but if it does not work in the Internet Explorer 8 it is not of any use unless you don't care about a lot of people not being able to access the information.

    ReplyDelete
  6. not able work in IE7 and IE8

    ReplyDelete
  7. Thanks for the technique. I used it with :hover (instead of :target) and it worked perfectly.

    ReplyDelete
  8. Very useful example. Thanks.

    ReplyDelete
  9. most screen readers may not be able to read the p tags because of the display: none. why not use
    clip: rect(0 0 0 0);
    height: 0.063em; width: 0.063em;
    overflow: hidden;
    margin: 0.063em; padding: 0; border: 0;
    position: absolute;
    screen readers will read it and the info will be invisible to viewers.

    ReplyDelete
  10. using the 'boilerplate' template will make most things work with a little fiddling in IE8, and IE7 users get an update browser, or view in a chrome frame option instead!

    ReplyDelete