Results 1 to 3 of 3

Thread: expand all tabs on page with switch content

  1. #1
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question expand all tabs on page with switch content

    1) Script Title: Switch Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.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:
    Code:
    <form>
    <input type="submit" action="opentabs.js" value="Open All Tabs" />
    </form>
    Then in the opentabs.js I tried:
    Code:
    group.defaultExpanded(0)
    group.init()
    
    group1.defaultExpanded(0)
    group1.init()
    Here's the HTML for group & group1:
    Code:
    		<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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

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

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

    [CODE]function collapsemultiple(){
    Code:
    bobexample.sweepToggle('contract')
    maryexample.sweepToggle('contract')
    joeexample.sweepToggle('contract')
    }
    Code:
    <a href="javascript:collapsemultiple()">Contract All</a>
    DD Admin

  3. #3
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok thank you for the help.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •