www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Show/Hide Function Help

  1. #1
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16

    Show/Hide Function Help

    Hello, I've came here again for quick help and
    advice on how to make my show/hide function
    within my javascript work properly. Username
    xelawho helped me establish a starting point
    in where to go, but now the javascript has
    gotten more difficult. I setted up a Fiddle so you
    can help and test out the current one so it may
    function the way I wish it would. Again, I dont
    have any experience in javascript or writing
    argumentative script. The codes in fiddle is set up
    how I want it to, but I now wish to make it function
    for a total of 12 toggle and showMoreText. I supplied
    the html with two javascripts, but the 2nd one
    overwrited the original one. Where do I start?

    http://jsfiddle.net/TPLOR/vuw8u/56/

    Thanks, any help is beneficial.

  2. #2
    Join Date
    Mar 2012
    Posts
    202
    HTML:
    HTML Code:
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    CSS:
    Code:
    .showMoreText{
       margin-left: 20px;
       margin-top: 40px;
    }
    
    .showMoreText2{
       margin-left: 40px;
       margin-top: 80px;
    }​
    Javascript:
    HTML Code:
    window.onload = loadDisps;
    
    function showMore(orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText") {
        children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
    }
    
    function showMore2(disp,orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText2") {
        children[i].style.display=children[i].style.display = disp; } }
    }
    
    function loadDisps() {
    var elems1 = document.getElementsByClassName("expander");
        for(i=0;i<elems1.length;i++) {
        elems1[i].id = i;
        elems2 = elems1[i].childNodes;
            for(x=0;x<elems2.length;x++) {
                if(elems2[x].className == "toggle") elems2[x].onclick = function() {
                showMore(this.parentNode.getAttribute("id")); };
                else if(elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() { showMore2("block",this.parentNode.getAttribute("id")); };
                elems2[x].onmouseout = function() { showMore2("none",this.parentNode.getAttribute("id")); }; }
            }
        }
    }
    ​
    This should work for you, minor changes to html/css, bigger changes to the JS but it should be easier for your now
    Last edited by Gray1989; 07-11-2012 at 04:01 PM.

  3. #3
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16
    Quote Originally Posted by Gray1989 View Post
    HTML:
    HTML Code:
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    CSS:
    Code:
    .showMoreText{
       margin-left: 20px;
       margin-top: 40px;
    }
    
    .showMoreText2{
       margin-left: 40px;
       margin-top: 80px;
    }​
    Javascript:
    HTML Code:
    window.onload = loadDisps;
    
    function showMore(orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText") {
        children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
    }
    
    function showMore2(disp,orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText2") {
        children[i].style.display=children[i].style.display = disp; } }
    }
    
    function loadDisps() {
    var elems1 = document.getElementsByClassName("expander");
        for(i=0;i<elems1.length;i++) {
        elems1[i].id = i;
        elems2 = elems1[i].childNodes;
            for(x=0;x<elems2.length;x++) {
                if(elems2[x].className == "toggle") elems2[x].onclick = function() {
                showMore(this.parentNode.getAttribute("id")); };
                else if(elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() { showMore2("block",this.parentNode.getAttribute("id")); };
                elems2[x].onmouseout = function() { showMore2("none",this.parentNode.getAttribute("id")); }; }
            }
        }
    }
    ​
    This should work for you, minor changes to html/css, bigger changes to the JS but it should be easier for your now
    Thanks Gray, somehow when I place it into jsFiddle, it doesnt work? Might be me but here's a link. http://jsfiddle.net/TPLOR/vy6nS/

  4. #4
    Join Date
    Mar 2012
    Posts
    202
    Quote Originally Posted by TPLOR View Post
    Thanks Gray, somehow when I place it into jsFiddle, it doesnt work?
    Under "choose framework", choose anything but onload

  5. #5
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16
    Quote Originally Posted by Gray1989 View Post
    Under "choose framework", choose anything but onload
    Thank you Gray1989! Is there a way to make it so by clicking on the "Click here for more information", there are multiple options and from those multiple options, each option with its own hover text? Sorry for being so bothersome, I appreciate all your help so far in getting me forward.

  6. #6
    Join Date
    Mar 2012
    Posts
    202
    HTML:

    HTML Code:
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none" id="0">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" id="0">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
        <div class="showMoreText" style="display: none" id="1">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" id="1">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
        <div class="showMoreText" style="display: none" id="0">
           Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" id="0">
           You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    Javascript:
    Code:
    window.onload = loadDisps;
    
    function showMore(orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText") {
        children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
    }
    
    function showMore2(disp,orig,idfor) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText2" && children[i].id == idfor) {
        children[i].style.display=children[i].style.display = disp; } }
    }
    
    function loadDisps() {
    var elems1 = document.getElementsByClassName("expander");
        for(i=0;i<elems1.length;i++) {
        elems1[i].id = i;
        elems2 = elems1[i].childNodes;
            for(x=0;x<elems2.length;x++) {
                if(elems2[x].className == "toggle") elems2[x].onclick = function() {
                showMore(this.parentNode.getAttribute("id")); };
                else if(elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() {
                showMore2("block",this.parentNode.getAttribute("id"),this.getAttribute("id")); };
                elems2[x].onmouseout = function() {
                showMore2("none",this.parentNode.getAttribute("id"),this.getAttribute("id")); }; }
            }
        }
    }
    ​

  7. #7
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16
    Thank you Gray, greatly appreciated codes. =)

  8. #8
    Join Date
    Mar 2012
    Posts
    202
    No problem :P

  9. #9
    Join Date
    Mar 2012
    Posts
    202
    I made a minor mistake in the code... It really shouldn't matter actually. To be honest, it could be touched up in a few places, PM me if you need anymore help with it.

    Code:
    window.onload = loadDisps;
    
    function showMore(orig) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText") {
        children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
    }
    
    function showMore2(disp,orig,idfor) {
        var children = document.getElementsByClassName("expander")[orig].childNodes; var childelem;
        for(i=0;i<children.length;i++) { if(children[i].className == "showMoreText2" && children[i].id == idfor) {
        children[i].style.display=children[i].style.display = disp; } }
    }
    
    function loadDisps() {
    var elems1 = document.getElementsByClassName("expander");
        for(i=0;i<elems1.length;i++) {
        elems1[i].id = i;
        elems2 = elems1[i].childNodes;
            for(x=0;x<elems2.length;x++) {
                if(elems2[x].className == "toggle") elems2[x].onclick = function() {
                showMore(this.parentNode.getAttribute("id")); };
                else if(elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() {
                showMore2("block",this.parentNode.getAttribute("id"),this.getAttribute("id")); };
                elems2[x].onmouseout = function() {
                showMore2("none",this.parentNode.getAttribute("id"),this.getAttribute("id")); }; }
            }
        }
    }​
    Code:
    children[i].style.display=disp;

  10. #10
    Join Date
    Mar 2012
    Posts
    202
    K I just went ahead and cleaned up the code for you, here it is (if you want it):

    Code:
    window.onload = function() {
    var elems1 = document.getElementsByClassName("expander");
        for(i=0;i<elems1.length;i++) {
        elems2 = elems1[i].childNodes;
            for(x=0;x<elems2.length;x++) {
                if(elems2[x].className == "toggle") elems2[x].onclick = function() { showMore(0,this); };
                else if(elems2[x].className == "showMoreText") {
                elems2[x].onmouseover = function() { showMore("block",this); };
                elems2[x].onmouseout = function() { showMore("none",this); }; }
            }
        }
    };
    
    function showMore(disp,elem) {
        var children = elem.parentNode.childNodes; for(i=0;i<children.length;i++) {
        if(disp != 0 && children[i].className == "showMoreText2" && children[i].getAttribute("id") == elem.getAttribute("id"))
        { children[i].style.display=disp; } else if(disp == 0 && children[i].className == "showMoreText") {
        children[i].style.display=children[i].style.display == "none" ? "block" : "none"; } }
    }

    And here's some better CSS to go with it

    Code:
    .expander{
       margin:20px;
    }
    
    .showMoreText{
       margin-left: 20px;
       margin-top: 20px;
    }
    
    .showMoreText2{
       margin-left: 40px;
       margin-top: 20px;
    }​
    Last edited by Gray1989; 07-11-2012 at 07:37 PM.

  11. #11
    Join Date
    Mar 2012
    Posts
    202
    Here is a copy of the new HTML & Script:

    HTML:
    HTML Code:
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
         <div class="showMoreText" style="display: none" name="0">
           1 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="0">
           1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="1">
           2 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="1">
           2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
        <div class="showMoreText" style="display: none" name="2">
           3 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="2">
           3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="3">
           4 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="3">
           4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
         <div class="showMoreText" style="display: none" name="0">
           1 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="0">
           1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="1">
           2 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="1">
           2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
        <div class="showMoreText" style="display: none" name="2">
           3 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="2">
           3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="3">
           4 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="3">
           4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    Script:
    Code:
    window.onload = function() {
        var elems1 = document.getElementsByClassName("expander");
        for (i = 0; i < elems1.length; i++) {
            elems2 = elems1[i].childNodes;
            for (x = 0; x < elems2.length; x++) {
                if (elems2[x].className == "toggle") elems2[x].onclick = function() {
                    showMore(0, this);
                };
                else if (elems2[x].className == "showMoreText") {
                    elems2[x].onmouseover = function() {
                        showMore("block", this);
                    };
                    elems2[x].onmouseout = function() {
                        showMore("none", this);
                    };
                }
            }
        }
    };
    
    function showMore(disp, elem) {
        var children = elem.parentNode.childNodes;
        for (i = 0; i < children.length; i++) {
            if (disp != 0 && children[i].className == "showMoreText2" && children[i].getAttribute("name") == elem.getAttribute("name")) {
                children[i].style.display = disp;
            } else if (disp == 0 && children[i].className == "showMoreText") {
                children[i].style.display = children[i].style.display == "none" ? "block" : "none";
            }
        }
    
    }​

  12. #12
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16

    Thumbs up

    Quote Originally Posted by Gray1989 View Post
    Here is a copy of the new HTML & Script:

    HTML:
    HTML Code:
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
         <div class="showMoreText" style="display: none" name="0">
           1 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="0">
           1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="1">
           2 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="1">
           2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
        <div class="showMoreText" style="display: none" name="2">
           3 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="2">
           3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="3">
           4 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="3">
           4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    <div class="expander">
        <div class="toggle">
        Click here for more information
        </div>
         <div class="showMoreText" style="display: none" name="0">
           1 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="0">
           1 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="1">
           2 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="1">
           2 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
        <div class="showMoreText" style="display: none" name="2">
           3 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="2">
           3 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here!
        </div>
        <div class="showMoreText" style="display: none" name="3">
           4 Here, you will find some more information
        </div>
        <div class="showMoreText2" style="display: none" name="3">
           4 You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! You can find the ultimate information here! 
        </div>
    </div>
    Script:
    Code:
    window.onload = function() {
        var elems1 = document.getElementsByClassName("expander");
        for (i = 0; i < elems1.length; i++) {
            elems2 = elems1[i].childNodes;
            for (x = 0; x < elems2.length; x++) {
                if (elems2[x].className == "toggle") elems2[x].onclick = function() {
                    showMore(0, this);
                };
                else if (elems2[x].className == "showMoreText") {
                    elems2[x].onmouseover = function() {
                        showMore("block", this);
                    };
                    elems2[x].onmouseout = function() {
                        showMore("none", this);
                    };
                }
            }
        }
    };
    
    function showMore(disp, elem) {
        var children = elem.parentNode.childNodes;
        for (i = 0; i < children.length; i++) {
            if (disp != 0 && children[i].className == "showMoreText2" && children[i].getAttribute("name") == elem.getAttribute("name")) {
                children[i].style.display = disp;
            } else if (disp == 0 && children[i].className == "showMoreText") {
                children[i].style.display = children[i].style.display == "none" ? "block" : "none";
            }
        }
    
    }​
    Once again Gray, you were of great help to me! Wished I knew you in life so I could buy you lunch and dinner!

  13. #13
    Join Date
    Mar 2012
    Posts
    202
    it's what i do

  14. #14
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    hey, i do adore to fress for free too!
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  15. #15
    Join Date
    Jun 2012
    Location
    Wisconsin
    Posts
    16
    Hey Gray,

    I been fussing around with the awesome code that you provided but I still have a few questions on putting it over onto my html code. Could you tell me if my "names" are not in the correct names along with the IDs? Somehow when I placed "showMoreText1" and "showMoreText2" are not visible within the Live View on Dreamweaver anymore. Thanks!

    Javascript:

    Code:
    window.onload = function() {
        var elems1 = document.getElementsByClassName("clearfix grpelem");
        for (i = 0; i < elems1.length; i++) {
            elems2 = elems1[i].childNodes;
            for (x = 0; x < elems2.length; x++) {
                if (elems2[x].className && elems2[x].className.indexOf("u3567-4") != -1) elems2[x].onclick = function() {
                    showMore(0, this);
                };
                else if (elems2[x].className && elems2[x].className.indexOf("showMoreText1") != -1) {
                    elems2[x].onmouseover = function() {
                        showMore("block", this);
                    };
                    elems2[x].onmouseout = function() {
                        showMore("none", this);
                    };
                }
            }
        }
    };
    
    function showMore(disp, elem) {
        var children = elem.parentNode.childNodes;
        for (i = 0; i < children.length; i++) {
            if (children[i].className) {
                if (disp != 0 && children[i].className.indexOf("showMoreText2") != -1 && children[i].getAttribute("name") == elem.getAttribute("name")) {
                    children[i].style.display = disp;
                } else if (disp == 0 && children[i].className.indexOf("showMoreText1") != -1) {
                    children[i].style.display = children[i].style.display == "none" ? "block" : "none";
                }
            }
        }
    }
    "Toggle"
    Code:
        <div class="clearfix grpelem" id="u3567-4"><!-- content -->
         <p>Energy is irreplaceable</p>
        </div>
    "showMoreText1" (1st level)
    Code:
        <div class="showMoreText1 clearfix grpelem" id="u3308-10" style="display: none" name="0"><!-- content -->
         <p id="u3308-2">Why is energy irreplaceable?</p>
         <p id="u3308-4">Well, it has to do with how the</p>
         <p id="u3308-6">earth came upon itself. Blah</p>
         <p id="u3308-8">Blah blah blah blah blah blah</p>
        </div>
    "showMoreText2" (2nd level - this is an image that will appear)
    Code:
        <div class="showMoreText2 clearfix grpelem" id="u3547" style="display: none" name="0"><!-- image -->
         <img id="u3547_img" src="images/energy1-u2991.png" alt="" width="253" height="368"/>
        </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles