Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with show/hide (display:block/none) JS code

    Hi everyone,

    I have a JS situation I need some help with.

    I have the following show/hide JS code working fine (2 iterations):
    Code:
    function showHidespec1(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
        if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details"><img src="images/hide_details.gif" width="68" height="9" alt="" border=0></a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a>';
        }
    }
    
    
    
    function showHidespec2(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
        if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details"><img src="images/hide_details.gif" width="68" height="9" alt="" border=0></a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a>';
        }
    }

    HTML code calling JS:

    Code:
    <div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
    Text1
    </div>
    
    
    
    
    [...]
    
    
    <div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
    Text2
    </div>


    I'd like to be able to show and hide both divs (or all if more than 2) via a separate "View all" link. I've tried a few things but just no luck.

    Any JS experts out there have an idea? I'd really appreciate any help offered.

    Thanks,
    Patrick

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've setup a test URL to visualize it a bit better..
    http://www.esolrac.com/test/test.html

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think i see the problem

    Code:
    onclick="showHidespec3(this,'show')
    is giving var _myTableObj a value of specialsID3_Div
    and

    you dont have a div with that id

    or thats what i see from looking at the source of your test.html

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply 6arredja.

    I actually do have that div: "specialsID3".

    It's empty and really just a placeholder for the "View all" / "Hide all" link (I removed it to avoid confusion). Just in case my first post was a bit too vague...what I'd like to happen is that link simultaneously open/close all "View Details" blocks.
    Last edited by patsol; 01-05-2007 at 06:47 AM.

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do you have all the spec predefinded or do you want them made on the fly?

    what i mean is do you want a function that will find all the specs then decide whether to hide them or not

    or

    do you want a function that has the spec's hard written in then hides or shows them?

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 6arredja View Post
    do you have all the spec predefinded or do you want them made on the fly?

    what i mean is do you want a function that will find all the specs then decide whether to hide them or not

    or

    do you want a function that has the spec's hard written in then hides or shows them?
    I think the latter will work great (whichever's easier )


    Thanks again for your time!

  • #7
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>  
    <head>  
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  
    <title>Test</title>  
    
    <script type="text/javascript">
    function showHidespec1(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
    		if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
        }
    }
    
    
    
    function showHidespec2(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
        if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
        }
    }
    
    function showHidespecall(_myObj,_action) {
    				 if(_action == 'show') {
    				 document.getElementById('specialsID1').style.display='block';
    				 document.getElementById('specialsID2').style.display='block';
    				 _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
    				 }
    				 if(_action == 'hide') {
    				 document.getElementById('specialsID1').style.display='none';
    				 document.getElementById('specialsID2').style.display='none';
    				 _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'show\'); return false" title="View Details">View Details</a>';
    				 }
    				 }
    
    
    
    </script>
    
    </head>
    
    
    <body>
    
    
    
    
    
    
    <div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="View Details">View Details</a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
    Text1 Text1 Text1
    </div>
    
    
    
    
    <br><br>
    
    
    <div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="View Details">View Details</a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
    Text2 Text2 Text2
    </div>
    
    
    
    
    <br><br><br>
    
    
    
    <div id="all" align=left><a href="#" style="cursor:pointer;"  title="VIEW ALL" onclick="showHidespecall(this,'show');">VIEW ALL</a> (clicking shows both hidden "View Details" divs above)</div>
    
    
    
    
    
    
    
    </body> 
    </html>
    heres what i got

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    6arredja, that works great, thank you!

    Is there any way clicking "VIEW ALL" not only displays the hidden divs, but also changes the 2 "View Details" links to "Hide Details" and vica versa (so the logic is kept throughout)? If this is what you had in mind in your first option ("a function that will find all the specs then decide whether to hide them or not"), I apologize for not catching that.

    Patrick

  • #9
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>  
    <head>  
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  
    <title>Test</title>  
    
    <script type="text/javascript">
    function showHidespec1(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
    		if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
        }
    }
    
    
    
    function showHidespec2(_myObj,_action) {
        var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
        if (_action == 'show') {
            _myTableObj.style.display = 'block';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
        }
        if (_action == 'hide') {
            _myTableObj.style.display = 'none';
            _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
        }
    }
    
    function showHidespecall(_myObj,_action) {
    				 if(_action == 'show') {
    				 document.getElementById('specialsID1').style.display='block';
    				 document.getElementById('specialsID2').style.display='block';
    				 document.getElementById('specialsID1_Div').innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
    				 document.getElementById('specialsID2_Div').innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
    				 _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
    				 
    				 }
    				 if(_action == 'hide') {
    				 document.getElementById('specialsID1').style.display='none';
    				 document.getElementById('specialsID2').style.display='none';
    				 document.getElementById('specialsID1_Div').innerHTML='<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
    				 document.getElementById('specialsID2_Div').innerHTML='<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
    				 _myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'show\'); return false" title="View Details">View Details</a>';
    				 }
    				 }
    
    
    
    </script>
    
    </head>
    
    
    <body>
    
    
    
    
    
    
    <div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="View Details">View Details</a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
    Text1 Text1 Text1
    </div>
    
    
    
    
    <br><br>
    
    
    <div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="View Details">View Details</a></div>
    
    <div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
    Text2 Text2 Text2
    </div>
    
    
    
    
    <br><br><br>
    
    
    
    <div id="all" align=left><a href="#" style="cursor:pointer;"  title="VIEW ALL" onclick="showHidespecall(this,'show');">VIEW ALL</a> (clicking shows both hidden "View Details" divs above)</div>
    
    
    
    
    
    
    
    </body> 
    </html>
    Give That A Try

  • #10
    New Coder
    Join Date
    Jan 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    6arredja, that worked perfectly...you da man!


  •  

    Posting Permissions

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