PDA

View Full Version : expand all tabs on page with switch content



switchcontent
07-09-2012, 01:48 PM
1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem: I'm trying to make it so on a button click it will expand all the tabs on the page.

Ok so I have a button on my page like so:

<form>
<input type="submit" action="opentabs.js" value="Open All Tabs" />
</form>

Then in the opentabs.js I tried:

group.defaultExpanded(0)
group.init()

group1.defaultExpanded(0)
group1.init()

Here's the HTML for group & group1:

<div id="group1-title" class="switch_link">
<h2>Employee Benefits, Perquisites & Notices</h2>
</div> <!-- End switch_link -->

<div id="group1" class="resources_switchgroup1">
<ul> <!-- List 1 -->
<li><a href="display.asp?info=EMP" target=_parent>Employee Notices</a></li>
<li><a href="http://www.ingretirementplans.com/index.shtml" target=_parent>401(k) Web Site</a></li>
<li><a href="https://www.benefitspaymentsystem.com/Participants/login.aspx" target=_parent>Beneflex Web Site</a></li>
<li><a href="display.asp?info=HOL" target=_parent>Holiday List</a></li>
<li><a href="http://www.horizon-bcbsnj.com" target=_parent>Horizon Web Site</a></li>
<li><a href="\Links\NJM.htm" target=_blank>NJ Manufacturers Insurance</a></li>
<li><a href="Links/Documents/1164859.pdf" target="_blank">On-Site Meal Charge Form</a></li>
<li><a href="Links/Documents/DELL EPP INFORMATION.pdf" target="_blank">W&S Dell Employee Discount</a></li>
<li><a href="Links/Documents/W&SVerizonEmployeeDiscount.pdf" target="_blank">W&S Verizon Wireless Employee Discount</a></li>
</ul>
</div> <!-- End resources_switchgroup1 -->

<script type="text/javascript">
var group=new switchcontent("resources_switchgroup1", "div")
group.setStatus('<div id="resourcesdropbox"><img src="images/close.gif" alt="-" title="-" /></div>', '<div id="resourcesdropbox"><img src="images/open.gif" alt="-" title="-" /></div>') //set icon HTML
group.collapsePrevious(false)
group.setPersist(false)
group.init()
</script>

<div id="group2-title" class="switch_link">
<h2>Office Operations & Services</h2>
</div> <!-- End switch_link -->

<div id="group2" class="resources_switchgroup2">
<ul> <!-- List 2 -->
<li><a href="display.asp?info=COP" target=_parent>Copy Service</a></li>
<li><a href="display.asp?info=LIMO" target=_parent>Car Service</a></li>
<li><a href="display.asp?info=CEN" target=_parent>Central File Requests</a></li>
<li><a href="display.asp?info=DIN" target=_parent>Dinner Program</a></li>
<li><a href="display.asp?info=DIR" target=_parent>Directions to the Office</a></li>
<li><a href="display.asp?info=LIB" target=_parent>Library Collection</a></li>
<li><a href="display.asp?info=NJNOT" target=_parent>New Jersey Notaries</a></li>
<li><a href="display.asp?info=NJTAF" target=_parent>New Jersey Turnpike Authority Forms</a></li>
<li><a href="\Links\NY Office Meeting Room Reservation Policy.pdf" target=_blank>New York Office Use and Conference Room</a></li>
<li><a href="display.asp?info=O" target=_parent>Overtime Schedule</a></li>
<li><a href="display.asp?info=SEC" target=_parent>Secretarial Groups</a></li>
<li><a href="display.asp?info=CPR" target=_parent>W&S Personnel Trained in Adult CPR and AED</a></li>
</ul>
</div> <!-- End resources_switchgroup2 -->

<script type="text/javascript">
var group1=new switchcontent("resources_switchgroup2", "div")
group1.setStatus('<div id="resourcesdropbox"><img src="images/close.gif" alt="-" title="-" /></div>', '<div id="resourcesdropbox"><img src="images/open.gif" alt="-" title="-" /></div>') //set icon HTML
group1.collapsePrevious(false)
group1.setPersist(false)
group1.init()
</script>

What am I doing wrong/What do I need to do to make this work?

ddadmin
07-10-2012, 01:03 AM
On the DD script page, the first demo already shows how to create links that expand/ contact all the contents of a group of switched contents, such as:


<a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a>

Where "bobexample" is the variable name you assigned to the initialization code for this group of DIVs:


var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
"
"

Now, if you wish to create a link that expands/ contact more than one group of Switched Contents, you can use use a simple JavaScript to call sweepToggle() multiple times to do that, such as:


function collapsemultiple(){
[CODE]bobexample.sweepToggle('contract')
maryexample.sweepToggle('contract')
joeexample.sweepToggle('contract')
}




<a href="javascript:collapsemultiple()">Contract All</a>

switchcontent
07-10-2012, 01:35 PM
Ok thank you for the help.