SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Greece
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with show/hide divs based on clicked href value of link

    Hi to all,
    I am new to javascript and actually quite desperate by now

    I have an HTML file that:
    a. gets data from an XML file and displays them in various divs (e.g. <div class='box' id='b0'> )
    b. these divs are hidden (by default) by a class name (class='box')
    c. when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
    d. then I add a new class name ('show') - so that this element shows up!

    If you run the code you will see that every time you click on a link a new div is displayed...

    So current problems:
    a. replace already shown divs with the new clicked ID so that only one div shows up every time.
    b. How can I avoid inserting the onClick event in every single <a href> tag - and make this more automated?


    ----------

    My code is as follows:


    Code JavaScript:
     
    function showContent(obj)
    {
    	var linkTo = obj.getAttribute("href");
    	var newlinkTo=linkTo.replace('#','');
    	//alert (newlinkTo);
     
    	document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";	
    	document.getElementById(newlinkTo).className += " Show";
     
    	return true;
    }
     
    <a href="#b0" onClick="return showContent(this);">
    <div id="text_content"> link2 </div>
    </a>
     
    <a href="#b1" onClick="return showContent(this);">
    <div id="text_content"> link 1 </div>
    </a>
     
    <div class='box' id='b0'> abstract content </div>
    <div class='box' id='b1'> introduction content </div>

    thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Katpal View Post
    So current problems:
    a. replace already shown divs with the new clicked ID so that only one div shows up every time.
    The normal way of handling this is to first turn off all of them, then to turn on just the one of interest.

    Quote Originally Posted by Katpal View Post
    b. How can I avoid inserting the onClick event in every single <a href> tag - and make this more automated?
    Good idea, it's bad to use inline event attributes too. Much preferred is to place the scripting commands to attach file events, with the scripting code itself.

    We can put the links in to a list, so that we can easily loop through them for the hiding part.

    Code html4strict:
    <ul class="contentLinks">
        <li><a href="#b0">link 2</a></li>
        <li><a href="#b1">link 1</a></li>
    </ul>

    Code javascript:
    var contentLinks = document.querySelector('.contentLinks');
    hideLinkedContents(contentLinks);

    with the hideLinkedContents function being:

    Code javascript:
    function hideLinkedContents(container) {
        var links = container.getElementsByTagName('a'),
            i;
        for (i = 0; i < links.length; i += 1) {
            addClass(document.querySelector(links[i].hash), 'hidden');
        }
    }

    It's better to hide content using scripting, so that in a non-scripted situation the content still remains accessible.

    The addClass method is a part of the standard hasClass, addClass and removeClass methods which help to simplify handling class names.

    Then, we can attach an event handler on to that list

    Code javascript:
    contentLinks.onclick = contentLinksHandler;

    so that we can capture the click event from one of the links, find out which one it was, and do things with it.

    Code javascript:
    function contentLinksHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) {
            targ = targ.parentNode; // fix opera bug
        }
        if (targ.nodeType === 1 && targ.nodeName === 'A') {
            hideLinkedContents(this);
            showContent(targ);
        }
    }

    where the showContent function is just a simplified version of what you had there before.

    The test page that shows this in action is at http://jsfiddle.net/pmw57/HvuQS/1/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Greece
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!


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
  •