Visual Effects Animation Tutorial for Web Designers jQuery - Accordion and Substitution.|NETTER KINGDOM Visual Effects Animation Tutorial for Web Designers jQuery - Accordion and Substitution.

Tuesday, July 12, 2011

Visual Effects Animation Tutorial for Web Designers jQuery - Accordion and Substitution.

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: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);
});


Integrate the above coding with css and html below.

<script type="text/javascript">
$(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:

  1. 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
  2. line to the two $ (". news_accordion h3: first"). addClass ("noborder"); used to eliminate the upper border (class = "noborder")
  3. 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)
  4. 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)

Comments :

7 komentar to “Visual Effects Animation Tutorial for Web Designers jQuery - Accordion and Substitution.”

Anonymous said...
on 

Hola! I've been following your weblog for some time now and finally got the courage to go ahead and give you a shout out from Dallas Texas! Just wanted to mention keep up the good work!

Also visit my web blog http://endurosmale.net

consultation voyance gratuite said...
on 

This blog has taught me many valuable things. Good luck :)

Launch Business in Delhi said...
on 

Very informative, keep posting such good articles, it really helps to know about things.

voyance gratuite par email said...
on 

Great article and right to the point. I don’t know if this is in fact the best place to ask but do you people have any ideea where to employ some professional writers? Thank you

voyance gratuite en ligne par mail said...
on 

I’ll immediately grab your rss feed as I can not find your email subscription link or newsletter service. Do you have any? Kindly let me know in order that I could subscribe. Thanks.

sofy lefour said...
on 

Pleasantly surprised by the discovery of your site so pretty and so original
voyance gratuite par mail

Philippe Halin said...
on 

Congratulations for the content of your blog, which incidentally is very interesting to see.
taches brunes
fiscalité marocaine marrakech

Post a Comment

Please don`t spaming !
Please do not put a link in the comments box. Author of comments have been getting backlinks from this blog.
I will deleted if your comment is spam or put your link IN THE COMMENTS BOX !!!
Have a nice day my friend... :D

Top Commenters