CODEWITHSUNDEEP
javascriptjqueryhtmlcss
slamek10
slamek10

Reputation: 93

Hide and show div with links

So I have this code that I will put in jsfiddle link bellow. Im making hide/show divs by clicking on links. Only problem is when I want to view a div (second, third or fourth div), lets say the third one, it doesnt show up on top but benith the first and second invisible divs. Anybody got any idea how to make this right and put any selected div on 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/

Upvotes: 3

Views: 380

Answers (3)

kabiroberai
kabiroberai

Reputation: 2913

The most efficient way to achieve this is as follows:

  1. Change all the links from javascript:show('link1'), javascript:show('link2'), etc. to just #content1, #content2, etc.
  2. You can now remove all of the javascript code.

  3. Create a new CSS stylesheet (or use the <style> tags), and in the stylesheet, write the following -

    .div {
  display:none;
}

.div:target {
  display:block;
}

That's it! I hope this helped you.

Upvotes: 0

dfsq
dfsq

Reputation: 193301

visibility: hidden hides element but leaves the space occupied by it. You need to hide 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 you code a little. 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/

Upvotes: 3

lmgonzalves
lmgonzalves

Reputation: 6588

Use:

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

Upvotes: 2

Related Questions