asked on

How do you make an "over ride" collapsible div

Hi,

I have some div's that toggle based on a click event... What I need is an "over ride" div to show all the div's at once. The trick is though that they can't just toggle. For example if one div is open and the "show all dates" is clicked then the one div that is open has to remain open and the others will toggle open.

Here is what I have so far:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".moredates").click(function(){
        $(this).next().slideToggle();            
        $(this).html($(this).text() == 'Hide all dates' ? 'Show all dates' : 'Hide all dates');
    });
})
</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#moredates_1").click(function(){
        $(this).next().slideToggle();            
        $(this).html($(this).text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    });
})
</script>



<script type="text/javascript">
$(document).ready(function(){
    $("#moredates_2").click(function(){
        $(this).next().slideToggle();            
        $(this).html($(this).text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    });
})
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#moredates_3").click(function(){
        $(this).next().slideToggle();            
        $(this).html($(this).text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    });
})
</script>



<a id="switch" class="moredates">Show All Dates and Locations</a>
<div id="switch">
 <a id="moredates_1" >[+]Dates 1</a>
<div id="moredates_1" class="moredates" data-collapsed="true">
More dates one...
</div> 

 <a id="moredates_2" >[+]Dates</a>
<div id="moredates_2" class="moredates" data-collapsed="true">
More dates two...
</div>

 <a id="moredates_3" >[+]Dates</a>
<div id="moredates_3" class="moredates" data-collapsed="true">
More dates three...
</div>

</div>

Open in new window

Thanks for the help!

Alexandre Simões

Mate... this is wrong it several ways...

1st: you have more that one element with the same id.
Avoid this by all means...

2nd: when you collapse a date the next one breaks and appears in front of the previous

3rd: you're calling donument.ready for each event handler... why?
Use document.ready as less as possible.
Ideally if you really need to use it you should only have one document.ready per page.

4th: to fix your issue I'll rewrite all your code... ok? :)

smfmetro10

ASKER

Outstanding! Thanks!

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alexandre Simões

Bed time for me mate.
If you need me leave a comment, I'll be back in 7h more or less!

Cheers!

smfmetro10