Solved

how do you have collapsible div's span multiple table cells

Posted on 2013-12-13
9
207 Views
Last Modified: 2014-01-16
Hi,

I have a function that works but I need it to either open two div's based on one click or one div that spans two table cells.

Heres what I have:
<!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>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
    </li>
    </td>
    <td>
    <li>
        <a>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More dates two...</div> 
    </li>
    </td>
</tr></table>
</ul> 
</body>
</html>

Open in new window


Picture just clicking one of the "+ Dates and Locations" and opening both div's.

Thanks!
0
Comment
Question by:smfmetro10
9 Comments
 
LVL 14

Expert Comment

by:quizwedge
Comment Utility
I'm a bit confused. Are you looking for what happens when you click "Show all Dates and Locations"?

If so, just look at the following part of the code

("#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');
    });    

Open in new window


That code could be simplified a bit, but that's the part that is figuring out what needs to be hidden or shown. The actual hiding/showing is done by the toggleDate function.
0
 

Author Comment

by:smfmetro10
Comment Utility
Hi. Thanks for the response. I would like the code to function the way it is. With the  show all dates and locations opening all divs( even when some are all ready open)

The trick is I need it to function across two table cells. So clicking one of the <a>date links will open two divs ( or one div doesn't really matter) that lives in two separate table cells.

Right now each div lives in its own table cell

I know that seems odd, it's just the way the code is written now. I can clarify more if need be.

Thanks!
0
 
LVL 14

Expert Comment

by:quizwedge
Comment Utility
If you just want "+ Dates and Locations" to open the same divs that Show all Dates and Locations does, you can update the on click function for $("#dates_list li a") to the following

$("#dates_list li a").on('click', function () {
        $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        
    });

Open in new window


Do you want to support closing as well? Did I miss what you're asking for again?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
A div spanning more than one cell would be invalid markup and be prone to reliability issues.

I would just take the simple approach of giving each of the divs an id so you can just directly address the two divs affected by the click. There is no need for complex or convoluted solutions; it is a simple effect.

Cd&
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Expert Comment

by:limweizhong
Comment Utility
Why don't you use a <td> that has a colspan of 2 instead?
0
 

Author Comment

by:smfmetro10
Comment Utility
Sorry if I haven't explained it well enough.

How about this?  I would like it to function like this with one difference.  There should only be one "[+] Dates and Locations" for every two divs... One will hold the dates and the other div holds the locations.  (the locations is part of an inner loop).

However the id's (if there are any) have to be dynamic because this first checks to see if there is more than one record for a particular date and if so will put this in so the user can see more dates and locations for a particular seminar.

Also the show all dates and locations can't just toggle the div's. Because then they could get "out of secquence". So "Show all Dates and Locations" will be displayed until all the div's are open. THEN the hide all dates will appear:

So If I could figure out how to make only  one [+] Dates and Locations open up both the dates div and the locations div, I think I would have it.

Here is what I have so far:

<!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>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
    </li>
    </td>
    <td>
    <li>
        <a>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More Locations two...</div> 
    </li>
    </td>
</tr></table>
</ul> 
</body>
</html>

Open in new window

0
 
LVL 14

Accepted Solution

by:
quizwedge earned 500 total points
Comment Utility
Sorry for the slow response. The code isn't the best it could be, but I was trying to work within your structure. Is this what you're looking for?

<!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);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
        console.log($elem.closest('tr').find('div.moredates').is(':visible'))
        console.log($('#dates_list li div.moredates:visible').length);
        console.log($('#dates_list li div.moredates').length);
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list li div.moredates:visible').length === $('#dates_list li div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
        $elem.html($elem.text() == '[-] Dates and Locations' ? '[+] Dates and Locations' : '[-] Dates and Locations');

        updateShowAll(setToHideAll);

    }
})

</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>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
    </li>
    </td>
    <td>
    <li>
        <div class="moredates" data-collapsed="true">More Locations one...</div> 
    </li>
</td>
</tr>
<tr>
<td>
    <li>
        <a>[+]Dates and Locations</a>
        <div class="moredates" data-collapsed="true">More dates two...</div> 
    </li>
    </td>
    <td>
    <li>
        <div class="moredates" data-collapsed="true">More Locations two...</div> 
    </li>
</td>
</tr></table>
</ul> 
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:smfmetro10
Comment Utility
Thank You Thank You Thank You!!!!  It's exactly what I need!!!

Just out of curiosity, is it possible to have this work without the <li>'s?

Just wondering.... THANKS!!!!!
0
 
LVL 14

Expert Comment

by:quizwedge
Comment Utility
NP. Sure, you can do it without the <li>'s. I just took li out of everywhere in the code.

<!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);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
        console.log($elem.closest('tr').find('div.moredates').is(':visible'))
        console.log($('#dates_list div.moredates:visible').length);
        console.log($('#dates_list div.moredates').length);
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list div.moredates:visible').length === $('#dates_list div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
        $elem.html($elem.text() == '[-] Dates and Locations' ? '[+] Dates and Locations' : '[-] Dates and Locations');

        updateShowAll(setToHideAll);

    }
})

</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>
    <a>[+]Dates and Locations</a>
    <div class="moredates" data-collapsed="true">More dates one...</div> 
</td>
<td>
    <div class="moredates" data-collapsed="true">More Locations one...</div> 
</td>
</tr>
<tr>
<td>
    <a>[+]Dates and Locations</a>
    <div class="moredates" data-collapsed="true">More dates two...</div> 
</td>
<td>
    <div class="moredates" data-collapsed="true">More Locations two...</div> 
</td>
</tr></table>
</ul> 
</body>
</html>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now