Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 324
  • Last Modified:

How do you open two div's at once with one click

Hi,

I need to have two div's open with one click.  (meaning if you click one of the "[+] Dates and Locations" then both div's will open on a given row.  Right now only one div will open.

Here is what I have so far:  Thanks for the help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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 () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        $this.toggleClass('showAll');
        $(this).html($(this).text() == 'Hide all Dates and Locations' ? 'Show all  Dates and Locations' : 'Hide all Dates and Locations');
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.next().slideToggle();
        $elem.html($elem.text() == '[-] Dates and Locations' ? '[+] Dates and Locations' : '[-] Dates and Locations');
    }
})

</script>



<style>
ul#dates_list{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#dates_list a{
    cursor: pointer;
}
ul#dates_list div.moredates {
    display: none;
} 
</style>
</head>

<body>

<a id="toggle_all_dates" class="moredates showAll">Show all Dates and Locations</a>

<ul id="dates_list">
<table id="mytable">
<tr>
<td>
    <li>
        <a class="moredates">[+]Dates and Locations Row One</a>
        <div class="moredates" data-collapsed="true">More dates one...</div>
      
    </li>
    </td>
    <td>
    <li>
        <a>[+]Dates and Locations Row One</a>
        <div class="moredates" data-collapsed="true">More Locations two...</div> 
    </li>
    </td>
</tr>
<tr>
<td>
    <li>
        <a class="moredates">[+]Dates and Locations Row Two</a>
        <div class="moredates" data-collapsed="true">More dates one...</div>
      
    </li>
    </td>
    <td>
    <li>
        <a>[+]Dates and Locations Row Two</a>
        <div class="moredates" data-collapsed="true">More Locations two...</div> 
    </li>
    </td>
</tr></table>
</ul> 
</body>
</html>

Open in new window

0
smfmetro10
Asked:
smfmetro10
  • 2
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/rS9Ja/

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var isShowingAll = $(this).hasClass('showAll');
        $(this).toggleClass('showAll');
        toggleDate($("#dates_list li a"), isShowingAll);
        $(this).html( isShowingAll ? 'Show all  Dates and Locations' : 'Hide all Dates and Locations' );
    });    
    
    $("#dates_list li a").on('click', function () {
        var mOpen = $(this).hasClass("open");
        $(this).toggleClass("open")
        toggleDate($(this), mOpen);        
    });
    
    function toggleDate($elem, isOpen){
        $elem.each(function() {
            $(this).html( isOpen ? '[+] Dates and Locations' : '[-] Dates and Locations');
            $(this).next()[ isOpen ? "slideUp" : "slideDown" ]();
        });
    }
});

Open in new window

0
 
smfmetro10Author Commented:
Thanks for the reply!

I need both divs to open on the table row based on clicking one of the links.  (You have it like I do where only one div opens)
0
 
leakim971PluritechnicianCommented:
Please note your HTML is malformed, you should(mus) NOT have UL->TR
UL want a LI
TR want a TD

Anyway here a new version : http://jsfiddle.net/rS9Ja/1/

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var isShowingAll = $(this).hasClass('showAll');
        var anchors = $("#dates_list li a");
        anchors[ isShowingAll ? "removeClass" : "addClass" ]("open");
        $(this).toggleClass('showAll');
        toggleDate(anchors, isShowingAll);
        $(this).html( isShowingAll ? 'Show all  Dates and Locations' : 'Hide all Dates and Locations' );
    });    
    
    /*
    $("#dates_list li a").on('click', function () {
        var mOpen = $(this).hasClass("open");
        $(this).toggleClass("open");
        toggleDate($(this), mOpen);        
    });
    */

    $("#dates_list li a").on('click', function () {
        var mOpen = $(this).hasClass("open");
        var anchors = $(this).closest("tr").find("li a");
        anchors[ mOpen ? "removeClass" : "addClass" ]("open");
        toggleDate(anchors, mOpen);        
    });
    
    function toggleDate($elem, isOpen){
        $elem.each(function() {
            $(this).html( isOpen ? '[+] Dates and Locations' : '[-] Dates and Locations');
            $(this).next()[ isOpen ? "slideUp" : "slideDown" ]();
        });
    }
});

Open in new window

0
 
smfmetro10Author Commented:
Thank you!!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now