Reputation: 954

using the expand/collapse function more than once

I built a expand/collapse plugin using jQuery. It works fine when I use it with one div. But it does not work when I try to use it with another div. What have I done wrong here?

This is the HTML code I apply the plugin to:

<div class="col">
    <div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="box-resize">
        <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-13" role="tabpanel" aria-expanded="true" aria-hidden="false">
            <div class="item">
                <ul class="item_list">
                    <li>Singapore</li>
                    <li>Singapore</li>
                    <li class="last_item_list">12 hours ago</li>
                </ul>
            </div>
        </div>
        <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-14" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
    </div>
    <div class="green_end mapexpand">
        <div class="column">
            <div class="mapexpand" id="mapresize">
                <span>Expand</span>
            </div>
        </div>
    </div>                        
</div>
<div class="col">
    <div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="box-resize">
        <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-13" role="tabpanel" aria-expanded="true" aria-hidden="false">
            <div class="item">
                <ul class="item_list">
                    <li>Singapore</li>
                    <li>Singapore</li>
                    <li class="last_item_list">12 hours ago</li>
                </ul>
                <a href="#"><img class="edit" src="images/icons/pencil.png"></a>
            </div>
        </div>
        <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-14" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
    </div>
    <div class="green_end mapexpand">
        <div class="column">
            <div class="mapexpand" id="mapresize">
                <span>Expand</span>
            </div>
        </div>
    </div>                        
</div>

This is the actual plugin:

var mr=$('#mapresize');
mr.click(function() {
    if ($(this).is('.mapexpand')) { 
        $(this).removeClass('mapexpand').addClass('mapcollapse');
        $("#box-resize").animate({
            height: '100%'
        }, 500, function() {
            mr.find('span').text('collapse');
        });
    } else {
        $(this).removeClass('mapcollapse').addClass('mapexpand');
        $("#box-resize").animate({
            height: '150px'
        }, 500, function() {
            mr.find('span').text('expand');
        });
    }
    return false;
});

Upvotes: 0

Answers (3)

user2432342

Reputation: 1

Use Classes instead of ID In your function you are not determining which div need to be closed so it will be closing both the div's or not working at all.

You should mention which div need to be collapsed or open. Let your function search the parent of the span which you have clicked for ex:-

    <div class = "a">
        <div class - "b">
            <div class = "c">
                <span class = "click-me">Close</span>
           </div>
        </div>
    </div>

   <div class = "a">
        <div class - "b">
            <div class = "c">
                <span class = "click-me">Close</span>
            </div>
        </div>
    </div>


    jquery (".click-me").click (function (e)) {
        if (your-condition) {
            $(this).parents (".a").animate-function-here
        }
        else {
            $(this).parents (".a").animate-function-here
        }
    }

I hope this helps

Upvotes: 0