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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with show/hide divs through add/remove class

    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 (display:none) 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' = display:block) - 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 both of them show

    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:


    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    See
    Code:
    <script type="text/javascript">
    window.onload= function(){
     var linkTo;
     var links=document.getElementById('wrap').getElementsByTagName('a');
     for(var i=0; i<links.length;i++){
    	links[i].onclick=function(){
    		alert(linkTo);
    		if(linkTo)
    			document.getElementById(linkTo).className= "box";
    		linkTo = this.getAttribute("href").replace('#','');
    		//alert(linkTo);
    		document.getElementById(linkTo).innerHTML=" This is where the xml variable content should go"+this.innerHTML;
    		document.getElementById(linkTo).className = "Show";
    	}
     }
    
    }
    
    </script>
    <div id="wrap">
    <a href="#b0" >
     link2 
    </a>
    
    <a href="#b1" >
     link 1 
    </a>
    
    <div class='box' id='b0'> abstract content </div>
    <div class='box' id='b1'> introduction content </div>
    </div>
    a. replace already shown divs with the new clicked ID so that only one div shows up every time.
    Sorry, that's not clear.

    PS: You can't put block level element (like div) inside an inline element (like anchor)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    katpal (06-28-2012)

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    katpal
    Look these links. They contain some information related to your questions. Additionally I'd like to say that the better to handle click on a href element is handle document.onclick and check there that the target element was href. To be sure that the handler processes valid hrefs is to assign specific class name for these elements to differ them on other hrefs.

    http://www.codingforums.com/showpost...0&postcount=13
    http://www.codingforums.com/showpost...2&postcount=15

    abduraooft
    You can't put block level element (like div) inside an inline element (like anchor)
    Really we can put any elements within any elements. But not all insertions are correct and valid due to the specification.

  • Users who have thanked siberia-man for this post:

    katpal (06-28-2012)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi thanks to all of you!

    abduraooft,

    this actually works... and I took Siberia-man's advice to add a line of extra code to detect only these specific links by adding the substring-checking line here:

    function scan(){
    var linkTo;
    var links=document.getElementById('wrap').getElementsByTagName('a');
    //alert (links.length);
    for(var i=0; i<links.length; i++){

    links[i].onclick=function showHide(){

    if (this.getAttribute("href").substring (0,2)== "#b") {
    //alert ("this is a valid link");
    if(linkTo) // the variable set from the previous click e.g. b0
    document.getElementById(linkTo).className= "box";

    linkTo = this.getAttribute("href").replace('#','');
    //alert(linkTo);
    document.getElementById(linkTo).className = "show";
    return false;
    }
    else
    {
    return;
    }
    }
    }
    }
    Don't know if its correct (being a newbie) but it works,
    thanks!


  •  

    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
    •