Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/hide element based on clicked href of link
    primarykey
    data
    text
    <p>I am new to JavaScript and actually quite desperate by now</p> <p>I have an HTML file that:</p> <ol> <li>gets data from an XML file and displays them in various divs (e.g. )</li> <li>these divs are hidden (by default) by a class name (class='box')</li> <li>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.</li> <li>then I add a new class name ('show') - so that this element shows up!</li> </ol> <p>If you run the code you will see that every time you click on a link a new div is displayed...</p> <p>So current problems:</p> <ol> <li>replace already shown divs with the new clicked ID so that only one div shows up every time.</li> <li>How can I avoid inserting the onClick event in every single tag - and make this more automated?</li> </ol> <hr> <p>My code is as follows:</p> <pre><code>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; } &lt;a href="#b0" onClick="return showContent(this);"&gt; &lt;div id="text_content"&gt; link2 &lt;/div&gt; &lt;/a&gt; &lt;a href="#b1" onClick="return showContent(this);"&gt; &lt;div id="text_content"&gt; link 1 &lt;/div&gt; &lt;/a&gt; &lt;div class='box' id='b0'&gt; abstract content &lt;/div&gt; &lt;div class='box' id='b1'&gt; introduction content &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload