smfmetro10
asked on
How do you make a dynamic "over ride" button to show and hide mulitple divs
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!
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>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
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>
$('button#group1').click(function(){
$('.group1').hide();
$('.group2').show();
});
$('button#group2').click(function(){
$('.group2').hide();
$('.group1').show();
});
$('a#all').click(function(){
$('.group1').show();
$('.group1').show();
});
ASKER
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")
But make it work for dynamic generated names.
Thanks!
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>
But make it work for dynamic generated names.
Thanks!
ASKER
Thanks for the "ID" catch!
ASKER
Here is the generated HTML output. Thanks for the help!
Open in new window