jquery - Switch text of span element based on whether the div is expanded or collapsed -
i trying have 3 divs , closed.when div closed span right side shown arrow pointing towards right , when click div want corresponding span arrow points down , again when div collapsed should point right.here fiddle.i think missing , can me out this. if 1 let know better ways of doing task (entire collapse , expansion) , appreciated. thanks
i've made few amends code, including using classes group elements. code set selected arrow, needed change divs default state before completing actions on clicked one.
try this:
$('.main').click(function() { var $el = $(this); if (!$el.next(".sub").is(":visible")) { // reset $('.sub').slideup("slow"); $('.arrow').html("▶"); // set current $el.next('.sub').slidedown("slow"); $('.arrow', $el).html("▼"); } });
<div class="main"> <span class="arrow">▶</span> </div> <div class="sub"> <p>here there many images</p> <p>here there many images</p> <p>here there many images</p> <p>here there many images</p> <p>here there many images</p> <p>here there many images</p> </div>
Comments
Post a Comment