Asked 8 years ago
4 Oct 2016
Views 1314
Phpworker

Phpworker posted

faq page animation effect

making faq page. and i need effect when i click on the Question , it should show answer with some little animation.
schema is :

    <li>
                <a class="title"  href="javascript:void(0);">  What is PHP?</a>
                <ul class="innertext">
					<li><p>PHP is a server-side scripting language designed primarily for web development but is also used as a general-purpose programming language  </p></li>                
				</ul>
              </li>
              <li>
                <a class="title"  href="javascript:void(0);"> What is jQuery?</a>
                <ul class="innertext">
					<li><p> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers</p></li>                
				</ul>
              </li>
             
         </ul>


js is

$(".title").click(function(){
$(".innertext).hide();
$(this).find(".innertext").show();
});


this is what i made for the simple FaQ Page . but i need some animation effect so it should look flawless and good animated .

Thanks
Mahesh Radadiya

Mahesh Radadiya
answered Nov 30 '-1 00:00

active is used for highlight selected question .


$('.title').click(function(e) {
	e.preventDefault();
	var notme = $('.active').not(this);
	 notme.toggleClass('active').next('.inner').slideToggle(350);
	 $(this).toggleClass('active').next().slideToggle("350");
 
});


slideToggle used for slideUp or slideDown .350 is animation speed. you can change as per need.

thanks
Post Answer