?
Solved

How do you make a dynamic "over ride" button to show and hide mulitple divs

Posted on 2013-12-12
5
Medium Priority
?
283 Views
Last Modified: 2013-12-13
Hi,

I have some div's that the id's are being generated dynamically based on a contentID from the database.

I have the individual div's working but I need to have an over ride button that will show and Hide all div's at once. The trick is that it just can't toggle.  If one of the div's is open and "show all dates" is being displayed then that one particular div must stay open as well as all the others.

Alexcode helped me out a great deal recently and I'm very close to knocking this out.

Here is what I have so far.
P.S. These variables probably wont work with JSFiddle as they are iDoc script variables.

Thanks!

	<!--$ loop TDC_CME_COURSES -->
	<!--$ tdcMoreClick = TDC_CME_COURSES.dDocName & "_1" -->
	<!--$ tdcDateID = TDC_CME_COURSES.dDocName & "_A" -->
       <!--$ tdcLocationID = TDC_CME_COURSES.dDocName & "_B" -->

<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' ? 'Show all dates' : 'Hide all dates');
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.next().slideToggle();
        $elem.html($elem.text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    }
})

</script>

</loop>

<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>

<table>
<tr>
<td>

<div class="dateLeft"><a id="<!--$ tdcMoreClick-->" style="cursor:pointer;align:right;">[+]</a>
<span style="color:#959595;"><!--$ formatDateWithPattern(tdcCMEDates.CMEDATE,"MMM d") --></span></div>
<ul id="dates_list">
 <li>
<div style="text-align:left;" id="<!--$tdcDateID-->" class="moredates showAll" data-collapsed="true"> 

More dates....
</div>
</li>
</ul>
</td>

<td>
<ul id="dates_list">
 <li>
 <div id="<!--$tdcLocationID -->" class="moredates showAll" data-collapsed="true"> 
More Locations....
</div>
</li>
</ul>
</td>
</tr>
</table> 

Open in new window

0
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 2000 total points
ID: 39714918
Hi,
could you perhaps provide the generated HTML ouput?
I can see that there two "<ul id="dates_list">" with the same ID - is this generated that way or just something from you for demonstration?

I can not get the final DOM structure with your sample above - the solution should be something really easy.

Thanks.
Rainer
0
 

Author Comment

by:smfmetro10
ID: 39715017
Ah- Nice catch on the same two id's.

Here is the generated HTML output.  Thanks for the help!

 <script type="text/javascript">
$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        
        if($this.hasClass('switch')){
            $('#CON_ID_004633_1 li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }else{
            $('#CON_ID_004633_1 li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        $this.toggleClass('switch');
        $(this).html($(this).text() == 'Hide all dates' ? 'Show all dates' : 'Hide all dates');
    });    
    
    $("#CON_ID_004633_1 li a").on('click', function () {
        toggleDate(this);
    });
    
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.next().slideToggle();
        $elem.html($elem.text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    }
})

</script>


<script type="text/javascript">

$(document).ready(function(){
    $(".switch").click(function(){
         $('#CON_ID_004633_B').toggle();
         $('#CON_ID_004633_A').toggle(); 
         $('#CON_ID_004633_1').html($('#CON_ID_004633_1').text() == '[-]' ?'[+]' : '[-]');          
        $(this).html($(this).text() == 'Hide All Dates and Locations' ? ' Show All Dates and Locations' : 'Hide All Dates and Locations');
    });
})
</script>


<div class="dateLeft"><a id="CON_ID_004633_1" style="cursor:pointer;align:right;">[+]</a>
				<span style="color:#959595;">Sep 5</span></div>
			                 <ul id="dates_list">
                       <li>
                               <div style="text-align:left;" id="CON_ID_004633_A" class="moredates switch" data-collapsed="true">   
						<span style="color:#959595;">Oct 5</span>
				
						<br />
						<span style="color:#959595;">Dec 5</span>
				
						<br />
				</li></ul></div>




    <ul id="dates_list">
                       <li>
       <div id="CON_ID_004633_B" class="moredates showAll" data-collapsed="true"> 
					
						<span style="color:#959595;">CA - San Francisco</span><br />
						<span style="color:#959595;">OR - Portland</span><br />
			</div>
			</li>
			</ul>

Open in new window

0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39715042
>P.S. These variables probably wont work with JSFiddle as they are iDoc script variables.

I am not sure what iDoc is, but all we need is your rendered html and js/jquery and css.

Perhaps this will help http://jsbin.com/OgEhAYET/1/edit

 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <a href="#" id="all">Show All</a>
  <div class="group1">
  <button id="group1">group1</button>
  <div class="red">Red</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
  
  </div>
   <div class="group2">
     <button id="group2">group2</button>
  <div class="cyan">cyan</div>
  <div class="magenta group2">magenta</div>
  <div class="yellow group2">yellow</div>
   <div class="black group2">black</div>
  </div>   
</body>
</html>

Open in new window

$('button#group1').click(function(){
  $('.group1').hide();
   $('.group2').show();
});
$('button#group2').click(function(){
  $('.group2').hide();
   $('.group1').show();
});
$('a#all').click(function(){
  $('.group1').show();
   $('.group1').show();
});

Open in new window

0
 

Author Comment

by:smfmetro10
ID: 39715478
Thanks for the suggestion but the functions have to work with variables as the div's are being created dynamically.

iDoc script is Oracle's content management scripting language.

There has to be a way to take something like this: ( "hardcoded version")

<!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' ? 'Show all dates' : 'Hide all dates');
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.next().slideToggle();
        $elem.html($elem.text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    }
})

</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</a>

<ul id="dates_list">
    <li>
        <a id="moredates_1">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
    </li>
    <li>
        <a id="moredates_2">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates two...</div> 
    </li>
    <li>
        <a id="moredates_3">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates three...</div>
    </li>
</ul> 
</body>
</html>

Open in new window


But make it work for dynamic generated names.

Thanks!
0
 

Author Closing Comment

by:smfmetro10
ID: 39717690
Thanks for the "ID" catch!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

801 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