This article is a continuation of some tutorials that I post visual effects ever for web designers. Previously we have learned to make the slider, how to remove a div element as well as transition effects on the movement of an HTML element. Now let's learn how to make jQuery accordion and transfer images to the gallery.
Make jQuery Accordion
Indirectly you've probably seen the jQuery accordion applied in many websites, generally jQuery accordion is widely used to shorten the display news / product where we only see rows of headlines or the name of the product only, but when the title / name of the product we highlight later there is an element that contains a summary slide downward. jQuery accordion is very useful to save space page website especially if your site has content very much. I myself never used jQuery accordion on a few projects I'm working, here is an example of an accordion jQuery I made:
Code here !
Below I show the script that need to make jQuery accordion:
$(".news_accordion h3:first").addClass("noborder");
$(".news_accordion div:not(:last)").hide();
$(".news_accordion h3").hover(function(){
$(".news_accordion h3").removeClass("active");
$(this).toggleClass("active");
$(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250);
});
Integrate the above coding with css and html below.
$(document).ready(function(){
$(".news_accordion h3:last").addClass("active");
$(".news_accordion h3:first").addClass("noborder");
$(".news_accordion div:not(:last)").hide();
$(".news_accordion h3").hover(function(){
$(".news_accordion h3").removeClass("active");
$(this).toggleClass("active");
$(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250);
});
});
</script>
<style type="text/css">
.news_accordion h3 {
background: #fff url(arrow.gif) no-repeat right -51px;
height: auto;
line-height:30px;
padding-left:5px;
font-size:14px;
font-weight:normal;
border-top: thin solid #cccccc;
margin:0;
border-bottom: 0;
border-left: 0;
border-right: 0;
cursor: pointer;
width:375px;
}
.news_accordion h3.noborder { border-top:none; }
.news_accordion h3.active { background-position: right 5px; background-color:#eee;}
.news_accordion div { height:75px; text-align:left; padding:5px 0 0 5px; width:375px; line-height:20px; font-size:12px; color:#555555; }
.news_accordion div a{ color:#000; text-decoration:none; }
.news_accordion div a:hover{ color:#F30; }
.news_accordion img { width:65px; height:65px; overflow:hidden; line-height:80px; }
</style>
<div class="news_accordion">
<h3><a href='#'>Title / Produck Name 1</a></h3>
<div>news summary<a href="#">more</a></div>
<h3><a href='#'>Title / Produck Name 2</a></h3>
<div>news summary<a href="#">more</a></div>
<!-- more your category -->
</div>
Explanation of jQuery code that I created above is as follows:
- The first row is $ (". news_accordion h3: last"). addClass ("active"); is used to add CSS class h3 active on the arrows to change the background position
- line to the two $ (". news_accordion h3: first"). addClass ("noborder"); used to eliminate the upper border (class = "noborder")
- to the third row $ ('. news_accordion div: not (: last)'). hide (); used to hide the child div of class news_accordion except the last child div: not (: last)
- The next row band is used to eliminate all active classes of elements h3, h3 add class active on the highlighted at the same time displaying a div underneath and at the same time hiding the div under h3 others who still perform with slideUp effects (slide up)
