Question

35

Show/hide element based on clicked href of link

rated 0 times [ 42] [ 7] / answers: 1 / hits: 33494 / 12 Years ago, tue, june 26, 2012, 12:00:00

I am new to JavaScript and actually quite desperate by now

I have an HTML file that:

gets data from an XML file and displays them in various divs (e.g. )

these divs are hidden (by default) by a class name (class='box')

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.

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:

replace already shown divs with the new clicked ID so that only one div shows up every time.

How can I avoid inserting the onClick event in every single 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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

View All

answered 12 Years ago desiraeleandrah · Accepted Answer

This sort of thing is not hard to do without jQuery.

I would recommend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)

<div id=nav-links>



    <a href=#!b0>

    <div id=text_content> link2 </div>

    </a>



    <a href=#!b1>

    <div id=text_content> link 1 </div>

    </a>



</div>



<div class='box' id='b0'> abstract content </div>

<div class='box' id='b1'> introduction content </div>



<script type=text/javascript>



    var links = document.getElementById('nav-links').getElementsByTagName('a');

    for(var i = 0, link; link = links[i]; i++) {

        link.onclick = showContent;

        // Hide content divs by default

        getContentDiv(link).style.display = 'none';

    }

    // Show the first content div

    if(links.length > 0) showContent.apply(links[0]);



    var current;



    function showContent() {



        // hide old content

        if(current) current.style.display = 'none';



        current = getContentDiv(this);

        if(!current) return true;



        //current.innerHTML = This is where the xml variable content should go;

        current.style.display = 'block';



        return true;



    }



    function getContentDiv(link) {



        var linkTo = link.getAttribute('href');



        // Make sure the link is meant to go to a div

        if(linkTo.substring(0, 2) != '#!') return;

        linkTo = linkTo.substring(2);



        return document.getElementById(linkTo);



    }



</script>