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 3 of 3
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts

    Question Best way to dynamically add content if tab is clicked?

    Hello, I am just going through my javascript book and looking/learning at examples. I've copied this code and i'm thinking i could really use this in my site, it's something i've been looking for on the internet for a while.

    I have a few questions regarding certain things and I would like to slightly change the code so it performs an additional task.

    I have uploaded a live example of the page as it is a lot easier for you guys to help and also easier for myself to explain properly. The file is located here: JS test page.

    As you can see, you click the different tabs and the relative information comes up.

    1)How can I change the code so that if one description is currently on-screen, when another tab is clicked, i want to hide the currently displayed information, and show the relative information to that particular tab.

    2)As you can see, clicking the tabs just brings up text saying 'Description for Tab' + #. This is added using the DOM, but i want to add a lot of description and obviously do not want to put an awful lot of text into the function. What is the best way to add this content dynamically? Should I create an XML file and access this file using javascript to display the different information?

    I understand question 2 could be done using ajax and php but I know nothing about either so i was wondering if there was another way to achieve this?

    Thank you for your time,

    Regards,

    LC.
    Last edited by LearningCoder; 03-05-2012 at 07:40 PM. Reason: Re-worded

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Ideally you would want your content to display on browsers with javascript disabled, so you would want to load your content "naturally" in the html. Then, if javascript is functioning, you can collapse the content and show it at will



    Code:
    <div class="tabStrip">
        <div id="tabStrip-tab-1" class="tabStrip-tab">News Update 1</div>
        <div id="tabStrip-tab-2" class="tabStrip-tab">News Update 2</div>
        <div id="tabStrip-tab-3" class="tabStrip-tab">News Update 3</div>
    </div>
    <div id="descContainer">
        <div id="content1" class="descr">content1</div>
        <div id="content2" class="descr">content2</div>
        <div id="content3" class="descr">content3</div>    
    </div>
    Code:
        function showDescription(num)
        {
            var specialContent = GetClass('descr');                // collect all your elements with class "descr"
            var num = num-1;                                       // Tweak your num variable so that it plays nice with arrays
    
            for (var i = 0 ; i<specialContent.length ; ++i) {      // iterate through all your elements with class "descr"
                if(num==i)
                   specialContent[i].style.display = 'inline-block';      // Show your special content 
                else
                    specialContent[i].style.display = 'none';      // Hide all other content 
            }
        }
    
    
        window.onload = function(){  // The following needs to run after the HTML, so place your js at the end, or use onload, or use attachEvent, etc
            var specialContent = GetClass('descr');  // collect all your elements with class "descr"
    
            for (var i = 0 ; i<specialContent.length ; ++i) {      // iterate through all your elements with class "descr"
                specialContent[i].style.display = 'none';      // Hide your collapse-able content 
            }
        }
    
    //////// New Stuff Here...
        GetClass = function(c) {  // this helper functuion will allow you to collect all elements with a certain class in one array object- very useful!
            var a = [] ,
                d = [] ,
                b = [];
            
            a = document.getElementsByTagName('*');
            
            for (var i = 0 ; i<a.length ; ++i) {
                b = a[i].className.split(' ');
                for(var j = 0 ; j<b.length ; ++j) {
                    b[j]==c&&(d.push(a[i]))
                }
            }
            
            return d;
        }
    This should address the stated issue of showing only one content and hiding the rest... But are you aware that the rest of your code leaves the tabs selected once clicked; thus preventing showDescription() from being called more than once per tab? This does not address that issue, mainly because I don't know if that was intentional.
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I don't think that is very effective code. For one thing, because you have an event handler for the entire page it will make it more complex to add other things, later, as that master event handler will have to get ever more complex.

    For another thing, there is no reason to dynamically add the content. Instead, just choose WHICH already-present content will be displayed.

    Example code (old, not great, but works):
    Code:
    <html>
    <head>
    <style type="text/css">
    div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
    div.tabBody { position: absolute; top: 0px; left: 0px; 
                  width: 100%; height: 100%;
                  z-index: 1; 
                  background-color: yellow; border: solid brown 2px; 
                  padding: 20px; 
                }
    div.tabHead { position: absolute; top: -20px; left: 10px; 
                  width: 100px; height: 22px;
                  z-index: 2;
                  text-align: center; 
                  background-color: lightyellow; border: solid brown 2px; border-bottom: none;
                }
    </style>
    <script type="text/javascript">
    function front(which)
    {
        for ( var t = 1; t < 9999; ++t )
        {
            var dv = document.getElementById("TABBODY"+t);
            if ( dv == null ) return;
            dv.style.zIndex = t == which ? 5 : 1;
            var tab = document.getElementById("TAB"+t);
            tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
            tab.style.zIndex = t == which ? 7 : 1;
        }
    }
    </script>
    <body onload="front(1);">
    Stuff at the top of the page.
    <br/><br/>
    <div id="ALL">
        <div id="TAB1" class="tabHead" onclick="front(1);">One</div>
        <div id="TAB2" class="tabHead" onclick="front(2);" style="left: 140px;">Two</div>
        <div id="TAB3" class="tabHead" onclick="front(3);" style="left: 260px;">Three</div>
    
        <div id="TABBODY1" class="tabBody">
            This is body 1
        </div>
        <div id="TABBODY2" class="tabBody">
            2 2  second 2 2 
        </div>
        <div id="TABBODY3" class="tabBody">
            Third one
        </div>
    </div>
    </body>
    
    </html>
    This could easily be improved so that the onclick handlers don't have to in the HTML code, if that's a concern. Personally, I don't mind it, but some purists do.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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