Results 1 to 10 of 10

Thread: Switch Content Script

  1. #1
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    Script: Switch Content Script
    http://dynamicdrive.com/dynamicindex...tchcontent.htm

    Thanks DD for creating such a great script. I have been able to modify the script to my liking so far.

    I have one small problem that I am sure someone can point out to me right away. I would like to have sub sub links under some of the headings.
    This works when the variable collapseprevious set to no.
    When set to yes it collapses the menu (as it is supposed to), but I don't want it to for a sub menu.

    In the javascript code I have the following set:
    Code:
    var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
    var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
    Here is my html:

    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=iso-8859-1" />
    <script language="javascript" src="/scripts/menu.js"></script>
    <title>Untitled Document</title>
    </head>
    
    <body>
    <h3 onClick="expandcontent(this, 'sub1')"><span class="showstate"></span>Heading 1</h3>
    <div id="sub1" class="switchcontent">
    	<ul>
    		<li>Link 1</li>
    		<li>Link 2</li>
    		<li>Link 3</li>
    		<li>Link 4</li>						
    	</ul>
    </div>
    
    <h3 onClick="expandcontent(this, 'sub2')"><span class="showstate"></span>Heading 2</h3>
    <div id="sub2" class="switchcontent">
    	<ul>
    		<li onclick="expandcontent(this, 'subsub2')">Link 1</li>
    			<div id="subsub2" class="switchcontent">
    				<ul>
    					<li>Sub Link 1</li>
    					<li>Sub Link 2</li>
    					<li>Sub Link 3</li>
    					<li>Sub Link 4</li>						
    				</ul>
    			</div>
    		<li>Link 2</li>
    		<li>Link 3</li>
    		<li>Link 4</li>						
    	</ul>
    </div>
    
    <h3 onClick="expandcontent(this, 'sub3')"><span class="showstate"></span>Heading 3</h3>
    <div id="sub3" class="switchcontent">
    	<ul>
    		<li>Link 1</li>
    		<li>Link 2</li>
    		<li>Link 3</li>
    		<li>Link 4</li>						
    	</ul>
    </div>
    </body>
    </html>
    Any help would be greatly appreciated.

    Thanks for your time and help.

  2. #2
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    Nobody knows how to get around this???

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

    Default

    Ok, the below changes lets you selectively disable the "collapseprevious" behavior for a particular switch content. In other words, it lets you collapse/expand a sub content within a switch content without affecting the entire switch content.

    First, replace function expandcontent() within the code of step 1 with:

    Code:
    function expandcontent(curobj, cid, collapseprev){
    var spantags=curobj.getElementsByTagName("SPAN")
    var showstateobj=getElementbyClass(spantags, "showstate")
    if (ccollect.length>0){
    if (collapseprevious=="yes" && typeof collapseprev=="undefined")
    contractcontent(cid)
    document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
    if (showstateobj.length>0){ //if "showstate" span exists in header
    if (collapseprevious=="no")
    showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
    else
    revivestatus()
    }
    }
    }
    Then, for the sub content, change the HTML code to:

    Code:
    <li onclick="expandcontent(this, 'subsub2', 'disablecollapse')">Link 1</li>
    Notice the extra "disablecollapse" parameter added in this case.

  4. #4
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    ddadmin,

    Thank you for your response and fix to my question.
    It works just as I requested it to.
    I really appreciate you taking the time to help me out.

    I have another question now that builds off of this scenario.

    After working with the script a bit more I noticed that if I wanted to subsub menus under the original main heading, it does not collapse the previous subsub menu.
    (Highlighted in orange in the code below)

    Code:
    <body>
    <h3 onClick="expandcontent(this, 'sub1')"><span class="showstate"></span>Heading 1</h3>
    <div id="sub1" class="switchcontent">
    	<ul>
    		<li>Sub Heading 1.1</li>
    		<li>Sub Heading 1.2</li>
    		<li>Sub Heading 1.3</li>
    		<li>Sub Heading 1.4</li>						
    	</ul>
    </div>
    
    <h3 onClick="expandcontent(this, 'sub2')"><span class="showstate"></span>Heading 2</h3>
    <div id="sub2" class="switchcontent">
    	<ul>
    		<li onclick="expandcontent(this, 'sub2sub1', 'disablecollapse')">Sub Heading 2.1</li>		
    			<div id="sub2sub1" class="switchcontent">
    				<ul>
    					<li>Sub Heading 2.1.1</li>
    					<li>Sub Heading 2.1.2</li>
    					<li>Sub Heading 2.1.3</li>
    					<li>Sub Heading 2.1.4</li>						
    				</ul>
    			</div>
    		<li onclick="expandcontent(this, 'sub2sub2', 'disablecollapse')">Sub Heading 2.2</li>		
    			<div id="sub2sub2" class="switchcontent">
    				<ul>
    					<li>Sub Heading 2.2.1</li>
    					<li>Sub Heading 2.2.2</li>
    					<li>Sub Heading 2.2.3</li>
    					<li>Sub Heading 2.2.4</li>						
    				</ul>
    			</div>
    		<li>Sub Heading 2.3</li>
    		<li>Sub Heading 2.4</li>						
    	</ul>
    </div>
    
    <h3 onClick="expandcontent(this, 'sub3')"><span class="showstate"></span>Heading 3</h3>
    <div id="sub3" class="switchcontent">
    	<ul>
    		<li>Sub Heading 3.1</li>
    		<li>Sub Heading 3.2</li>
    		<li>Sub Heading 3.2</li>
    		<li>Sub Heading 3.4</li>						
    	</ul>
    </div>
    </body>
    Is it possible to make the script function as it should normally, but now a couple of layers into the script as well??

    I hope I explained it well enough.
    Please let me know if you would like a better explanation.
    Forgive me, but I am not as gifted as you in the ways of Javascript yet.

    I really truly appreciate you taking the time to help me out.


    Thanks again for everything,

    NTSsupport

  5. #5
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    Just an idea.
    I may be way off base here.

    Maybe have a way to make the subsub menu collapse to its parent object instead of the script as a whole?

    Does that make any sense?

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

    Default

    Hmm if I understand correctly then, you want it so that when clicking:

    Sub Heading 2.2

    for example to expand its sub list, you want:

    Sub Heading 2.1

    and its sub list to collapse at the same time?

  7. #7
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    You are correct.
    That is exactly what I am looking for it to do.

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

    Default

    Hmmm this could be a little tricky. I'll have to revisit this thread later this week to try and find time for a solution.

  9. #9
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ddadmin,

    I really appreciate you taking the time to look into this.
    I just thought that the script would work that way initially.

    Thanks again for your help.
    I will keep checking back.

    Respectfully,

    NTSsupport

  10. #10
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script

    DDAdmin,

    Just checking in to see if you were able to come across a way to make the script function as we have discussed in the previous few posts?

    Thanks again for your time and help.
    I appreciate it.

    Thanks,

    NTSsupport

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
  •