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

JavaScript
1

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

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:



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

The normal way of handling this is to first turn off all of them, then to turn on just the one of interest.

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.


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



var contentLinks = document.querySelector('.contentLinks');
hideLinkedContents(contentLinks);

with the hideLinkedContents function being:


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


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.


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/

3

Thanks Paul!