jquery - fadeOut() single div over multiple -
jquery - fadeOut() single div over multiple -
i have 3 divs class "page". each div there "info" div shows informations div.
what wanted accomplish when click text under "page" div fadeout , "info" fadein.
even if know nil of jquery, managed working. html is:
<div id="content"> <div class="page"><p class="click">click me open</p></div> <div class="info"><div class="closebut"></div></div> <div class="page"><p class="click">click me open</p></div> <div class="info"><div class="closebut"></div></div> <div class="page"><p class="click">click me open</p></div> <div class="info"><div class="closebut"></div></div> </div>
and jquery is:
$(document).ready(function(){ $(".info").hide(); $("p.click").click(function(){ $(".page").fadeout("slow", function(){ $(".info").fadein(); }); }); $(".closebut").click(function(){ $(".info").fadeout("slow", function(){ $(".page").fadein(); }); }); });
so, when document loads, jquery hides ".info" divs. when click on paragraph ".click" ".page" fadeout and, @ end, ".info" fadein. have little image of x working closing button (.closebut).
everything works fine. when click first "p.click" every ".page" fadeout , every ".info" fadein.
since i'll need 5 , more ".page" + ".info", easiest way fadeout/fadein single div per time?
i mean, without creating more classes in html , extending jquery code.. give thanks in advance help.
you can utilize jquery's next()
, prev()
functions, along parent()
.
$("p.click").click(function(){ var p = $(this); p.parent().prev().prev(".page").fadeout("slow", function(){ p.parent().prev(".info").fadein(); }); }); $(".closebut").click(function(){ var = $(this); but.parent(".info").fadeout("slow", function(){ but.parent().prev(".page").fadein(); }); });
this works because, within event handler, this
refers element clicked.
jquery fadein fadeout
Comments
Post a Comment