javascript - Cannot hide all div contents -
i'm making collapsible/expandable divs, similar accordions, if click specific title, contents related title appear. , if click on different title, opened contents close before revealing current contents clicked title, 1 contents section open @ time. i've got sorted out.
<div class="container"> <div class="title">one</div> <div class="content">content one</div> </div> <div class="container"> <div class="title">two</div> <div class="content">content two</div> </div> <div class="container"> <div class="title">three</div> <div class="content">content three</div> </div> <div class="container"> <div class="title">four</div> <div class="content">content four</div> </div>
however, i'm trying make divs can collapsed , contents hidden. i'm having hard time figuring part out. here's have far:
$(".title").click(function () { $content = $(this).next(); if (!($content.is(":visible"))) { $(".content").slideup("fast"); $content.slidetoggle(200); } });
demo: http://jsfiddle.net/2skczuze/
i'm new javascript can't figure out how make expanded div collapse without opening div.
step1 :collapse content divs except current one.
step2 : toggle visiblility of current content div.
$(".title").click(function () { $(".content").not($(this).next()).slideup(); $(this).next().slidetoggle(); });
Comments
Post a Comment