Question

I am trying to have three divs , initially all are closed.When the div is closed a span to right side is shown which is an arrow pointing towards right , when I click any div I want that the corresponding span arrow points down and again when that div is collapsed it should point right.Here is my fiddle.I think I am missing something , can anyone just help me out with this.
Also if any one could just let know better ways of doing this task (entire collapse , expansion) , it would be much appreciated.
Thanks

Answer 1

I’ve made a few amends to your code, including using classes to group elements. Your code was originally set the selected arrow, so you needed to change all the divs back their default state before completing the actions on the clicked one.

Try this:

$('.main').click(function() {
    var $el = $(this);

    if (!$el.next(".sub").is(":visible")) {   
        // reset all
        $('.sub').slideUp("slow");
        $('.arrow').html("▶");

        // set current
        $el.next('.sub').slideDown("slow");
        $('.arrow', $el).html("▼");
    }
});

<div class="main">
    <span class="arrow">&#9654;</span>
</div>
<div class="sub">
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
</div>

Example fiddle