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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Javascript Show Hide Div Trouble.

    Hello, im preety new to JS but i've managed to create a function to show and hide a div according to a link's URL, but im gonna have lots of url's and lots of div's to show and hide, its not a problem to show and hide them, the only trouble is that they stack, if i show div 1, and then press link 2 to show div 2, Div 2 is gonna be below div 1, and what i want is that when i click link 2 to hide div 1 or any other shown divs, im sure its possible but i don't know how to do it.

    I think it would be possible by storing the id of the div in a variable, but the only problem is that when i call that function, the variable always changes so it would be a matter of storing the id in a variable outside the function, but i don't know how to do that, or what are the rules and i really don't have much time to study deep into it, plz some help?.

    This is my code:

    JS
    Code:
    function showHide(product) {
    		var el = document.getElementById(product);
    		el.className = (el.className == 'hide') ? '' : 'hide';
    	}
    HTML

    Code:
    <div id="1" class="hide">Content of Div 1</div>
    <div id="2" class="hide">Content of Div 2</div>
    
    <a href="javascript:showHide('1');">Show Hide 1</a>
    <a href="javascript:showHide('2');">Show Hide 1</a>
    CSS

    Code:
    .hide {
     display:none;
    }
    NOTE = I need to have the javascript function call in href because of an applet im using.

    In resume, the divs are hidden at the start, when i click one link, the div shows, when i click the other link i need the previous div shown to be hidden (class="hide"), and show the new div and so on.

    Thank you for the help in advance!!

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Here is the updated function:

    Code:
    <script type="text/javascript">
        function showHide(products) {
            var el = document.getElementById('cntnr');
            var children = el.childNodes;
            if (children[products].className == "hide") {
                for(var i=0; i < children.length; i++) {
                    children[i].className = 'hide';
                }
                children[products].className = '';
            }
            else {
                children[products].className = 'hide';
            }
        }
    </script>
    And you're going to need to change the HTML mark-up a bit:

    Code:
    <div id="cntnr"><div class="hide">Content of Div 1</div><div class="hide">Content of Div 2</div></div>
    Keep in mind that it is intentionally on one line with no spaces in between to avoid Mozilla's mix-up with whitespace and child elements.

    And well, your links would be changed a little as well, like so:

    Code:
    <a href="javascript:showHide('0');">Show Hide 1</a>
    <a href="javascript:showHide('1');">Show Hide 2</a>
    There probably exists a better solution to this, but this is what I managed to come up with. Enjoy.

  • Users who have thanked Eldarrion for this post:

    neocorps (03-04-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey thank you very much, i'll give it a try and reply if it worked!

    EDIT ----------------------

    Ok i've tested it and works like a charm!, though for formatting purposes, i started in 1 instead of 0, that way i can have the divs in this order:

    Code:
    <div id="cntnr">
         <div class="hide">
               Content of Div 1
         </div><div class="hide">
               Content of Div 2
         </div>
    </div>
    Which is a little more understandable!.. thanx for the advice!
    Last edited by neocorps; 03-04-2009 at 08:43 PM. Reason: post advance

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi i have a problem about hiding and showing divs. i have 3 divs (each div has an anchor). they were created using a repeater. i add a jquery script that if the anchor is clicked then the div will toggle (hide/show). the first and third div works fine. ive noticed that if i click the second div, both the second and third divs toggle.

    ive already viewed the source and check the javascript code. and also debugged the javascript. and everything seems to work fine. except that it toggles both 2nd and 3rd div if the 2nd div is clicked.

    im a bit frustrated over this now. coz i cant figure out wats wrong. need some help.

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyways heres the code:

    run inside the Load_Page Event handler:

    HtmlAnchor anchor = (HtmlAnchor)pnlCategory.FindControl("anchor");
    HtmlTable table = (HtmlTable)pnlCategory.FindControl("table");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "__expcol" + pnlCategory.ClientID, String.Format("$(document).ready(function() {{ $('#{0}').click(function(e) {{ doExpandCollapse(e, '{1}'); }} ); }} );", anchor.ClientID, divContent.ClientID), true);
    -----------------------------------------------------------------
    javascript:

    function doExpandCollapse(e, targetId) {

    var target1 = document.getElementById(targetId);
    var target = $("#" + targetId);
    //if (target.css("display") == "block") { // expanded
    if(target1.style.display == "block") {
    //target[0].attributes["display"] = "none";
    //target[0].css("display") = "none";
    //target.slideUp(300);
    //target.css("display", "none");
    target1.style.display = "none";
    // $("#" + icon).attr("src", collapseimage);
    } // end if

    else
    { // collapsed
    //target.slideDown(300);
    //target.css("display", "block");
    target1.style.display = "block";
    //target[0].attributes["display"] = "block";
    //target.css("display") = "block";
    // $("#" + icon).attr("src", expandimage);
    } // end else
    }

    the commmented codes are the one's ive vainly tried but to no effect.


  •  

    Tags for this Thread

    Posting Permissions

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