We help IT Professionals succeed at work.

How do you make an "over ride" collapsible div

smfmetro10
smfmetro10 asked
on
202 Views
Last Modified: 2013-12-11
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!
Comment
Watch Question

Alexandre SimõesSoftware Architect
CERTIFIED EXPERT

Commented:
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? :)

Author

Commented:
Outstanding! Thanks!
Software Architect
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Alexandre SimõesSoftware Architect
CERTIFIED EXPERT

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

Cheers!

Author

Commented:
Thank you so much!!

 Is there a way to not have the <ul>?

The div's are actually in a loop based on some conditions
Alexandre SimõesSoftware Architect
CERTIFIED EXPERT

Commented:
It's easier to manage lists like this.
If you're creating the div's in a loop then now create <li> element groups inside the <ul>

Author

Commented:
Thanks!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.