Clever Geek Handbook

Hide and show div with links

So I have this code which I will put in the jsfiddle link below. Im creating hide / show divs by clicking on links. The only problem is when I want to view a div (second, third or fourth div), say the third, it doesn't show on top, but first and second invisible divs first. Has anyone figured out how to do this correctly and put any selected div at the top of the page?

<body>
       <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:show('link1')" id="link1">Felge</a></li>
            <li><a href="javascript:show('link2')" id="link2">Gume</a></li>
            <li><a href="javascript:show('link3')" id="link3">Branici</a></li>
            <li><a href="javascript:show('link4')" id="link4">Farovi</a></li>
        </ul>
    </div>

    <div class="col-md-3">
        <div class="div" id="content1">
            <p>BBS</p>
            <p>ENKEI</p>
            <p>KONIG</p>
        </div>

        <div class="div" id="content2">
                <p>Michelin</p>
                <p>Hankook</p>
                <p>Sava</p>
        </div>

        <div class="div" id="content3">
            <p>AMG</p>
            <p>Brabus</p>
            <p>Original</p>
        </div>

        <div class="div" id="content4">
            <p>Angel Eyes</p>
            <p>Devil Eyes</p>
            <p>Original</p>
        </div>
    </div>

      

        
        
        
      

    

`<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  

function show(id) {

    if (id == 'link1') {
        document.getElementById("content1").style.visibility = 'visible';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link2') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'visible';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link3') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'visible';
        document.getElementById("content4").style.visibility = 'hidden';
    }
    else if (id == 'link4') {
        document.getElementById("content1").style.visibility = 'hidden';
        document.getElementById("content2").style.visibility = 'hidden';
        document.getElementById("content3").style.visibility = 'hidden';
        document.getElementById("content4").style.visibility = 'visible';
    }
}

function init() {

    var divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
    }
    var a = document.getElementsByTagName("a");
    a.onclick = show;
}

window.onload = init;

`

https://jsfiddle.net/4qq6xnfr/

+3


source to share


3 answers


visibility: hidden

hides the element but leaves the space it occupies. You need to hide the element with display: none

:

document.getElementById("content1").style.display = 'block';
document.getElementById("content2").style.display = 'none';
document.getElementById("content3").style.display = 'none';
document.getElementById("content4").style.display = 'none';

Also, you can optimize your code a bit. Maybe like this:



function show(id) {
    var number = id.replace('link', '');
    var blocks = document.querySelectorAll("[id^=content");
    for (var i = 0; i < blocks.length; i++) {
        blocks[i].style.display = 'none';
    }
    document.querySelector('#content' + number).style.display = 'block';
}

Demo: https://jsfiddle.net/4qq6xnfr/3/

+3


source


Using:



element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
+2


source


The most efficient way to achieve this is:

  • Change all links from javascript:show('link1')

    , javascript:show('link2')

    etc. only on #content1

    , #content2

    etc.
  • You can now remove all javascript code.

  • Create a new CSS stylesheet (or use tags <style>

    ) and in the stylesheet write the following -

    .div {
  display:none;
}

.div:target {
  display:block;
}

What is it! Hope this helped you.

0


source






More articles:


All Articles