Introduction
This would be a simple, quick and easy tutorial. The reason I make this tutorial is for my upcoming post which will show you the plugins and scripts that I used in my most recent project. It's going to be a really useful post and make sure you won't miss it :)
This script is fairly straight forward. What it does is using the UL list and allow user to toggle to display the content of LI items. This is a really useful user interface feature that it helps designers to save space and build a less complicated user interface. It eliminates redundant element and allow user view the content only when they want to see it.
And...... this is how it will look like:
1. HTML
It consists of UL list and the rest is quite self-explanatory.
<ul id="toggle-view"> <li> <h3>Title 1</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> <li> <h3>Title 2</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> <li> <h3>Title 3</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> </ul>
2. CSS
I used the minimum CSS code to style this tutorial. The most important thing is, we have to make sure the P is hidden by default.
#toggle-view { list-style:none; font-family:arial; font-size:11px; margin:0; padding:0; width:300px; } #toggle-view li { margin:10px; border-bottom:1px solid #ccc; position:relative; cursor:pointer; } #toggle-view h3 { margin:0; font-size:14px; } #toggle-view span { position:absolute; right:5px; top:0; color:#ccc; font-size:13px; } #toggle-view .panel { margin:5px 0; display:none; }
3. Javascript
This would be one of my shortest jQuery code! We attach click event to the LI item and everytime a user click on the item check if P tag is visible. If it's hidden, show it otherwise hide it. Also, it will change the html value for the SPAN to either plus or negative sign.
$(document).ready(function () { $('#toggle-view li').click(function () { var text = $(this).children('div.panel'); if (text.is(':hidden')) { text.slideDown('200'); $(this).children('span').html('-'); } else { text.slideUp('200'); $(this).children('span').html('+'); } }); });
Conclusion
I hope you will like this quick and short tutorial! :) stay tuned for my upcoming post!
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.var text = $(this).children('p');
to
var text = $(this).children('div.panel');
HTML:
<li>
<h3>Title 3</h3>
<span>+</span>
<div class="panel"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</div>
</li>
I tried changing both
('span')
to
('h3')
with the wording I wanted to use but that didn't work
can you help?
Great tutorial, works well and light weight.
Im not a whizz on jquery and cant get the first li to show as per your guidance:
$('#toggle-view li:eq(0)').children('p').show();
$('#toggle-view li:eq(0)').children('span').html('-');
Can you please advise? The span element changes but it doesnt show?
Just one question : what if we want to add a link in the p section? A click on the link will open it but it would also trigger the toggle and close the box, since the p is contained in the li.
Giving a fixed height to the li to fixed height doesn't work, neither does playing on the z-index of the p box...
For example...
Engine Size >> opens to a list of engine sizes that toggle with engine type
Hope that makes sense! Thanks in advance.
I am trying to add another level of toggle...Is this possible?
I would like the toggle to open up to a list that has another toggle...Hope this makes sense!
Thanks in advance...
Great tutorial, nice scripts.I use it and load some text in a frame, every things is OK, only a problem with frame that appears scroll bar in height and width.I like it expand auto, please help!
thanks