Simple Toggle with CSS & jQuery
Tags: Beginner, WidgetsI know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state.
After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had gone through.
Step1. Wireframe & Style
We start out with an h2 tag with a link as the “trigger” for our effect. Below our h2, we will have our container where we hold the content.Note that we nest the container within another div. One of the main reasons I decided to do this was to prevent the padding from easing up and down during its action. Take a look here for a bad example of a toggle.
HTML
<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
<!--Content-->
</div>
</div>CSSh2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}Step2. Activating the Toggle with jQuery
jQueryWe will now activate this toggle effect with some simple jQuery.
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});Conclusion
I am no jQuery master, so there may be an even shorter way of writing this up, but this does the trick for me. If any jQuery heads are out there still reading, please share some of your techniques and tips!Looking for an Accordion?
Related Articles Elsewhere
- Effects/toggle – jQuery
- Slicker Show and Hide – Learning jQuery
- Simple Effects Plugins – Learning jQuery
Không có nhận xét nào:
Đăng nhận xét