CODEWITHSUNDEEP
javascriptjqueryhtml
Kernelus
Kernelus

Reputation: 57

Hide and Show div works only once

I made such a simple code to show and hide div but i don't know why it works only once. When i show and hide other div, then when iw ant to do it again it dosen't work. Here is code (content of div is not important). In css i set display:none on both of divs

function pokazMail(ID) {
    if (document.getElementById(ID).style.display != 'none') {
        if (document.getElementById('wizyta').style.display == 'block') {
            document.getElementById('wizyta').style.display = 'none';
            document.getElementById(ID).style.display = 'block';
        } else {
            document.getElementById(ID).style.display = 'block';
        }
    }
}

function pokazWizyta(ID) {
    if (document.getElementById(ID).style.display != 'none') {
        if (document.getElementById('mail').style.display == 'block') {
            document.getElementById('mail').style.display = 'none';
            document.getElementById(ID).style.display = 'block';
        } else {
            document.getElementById(ID).style.display = 'block';
        }
    }
}
#mail{display:none;}
#wizyta{display:none;}
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a>
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a>
<div id="mail">dsjdhs </div>
<div id="wizyta">12313213</div>

Here it is: http://jsfiddle.net/Lcbm8m8m/

Upvotes: 1

Views: 2260

Answers (4)

Filip
Filip

Reputation: 1244

The problem you've stated was a little bit off than what your code was trying to achieve... BUT I THINK I've understood what you're actually trying to achieve...

So, if this is what you are trying to achieve than my solution will work just fine: You expect than when you click on a display control element, other 'similar' associated elements are hidden but the one that's associated to the display control element you've clicked... A bit of a mouthful, right? Sorry, but I am not a native English person :(

So the code, as generic as possible is the one I've set you up with on your jsfiddle http://jsfiddle.net/Lcbm8m8m/71/

Anyway, just in case someone comes up w/ a better idea and overrides the fiddle, here's the code as well..

HTML

<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('mail');">First.</a>
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('wizyta');">Second.</a>
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('third');">Third.</a>
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('fourth');">Fourth.</a>
<div id="mail" class="carouselle hidden">MAIL</div>
<div id="wizyta" class="carouselle hidden">WIZTYA</div>
<div id="third" class="carouselle hidden">THIRD</div>
<div id="fourth" class="carouselle hidden">FOURTH</div>

CSS

.hidden{display:none;}
.carouselle{}

JAVASCRIPT

function hideAllButMe(show) {    

    // Get all the elements on the page with the 'carouselle' class name.    
    var elementsMarkedForHidingList = document.getElementsByClassName('carouselle');    

    // document.getElementsByClassName returns a NodeList and this turns it into an array
    var nodeArray = Array.prototype.slice.call(elementsMarkedForHidingList);

    // we iterate the array and hide all the elements...
    nodeArray.map( function(item) {
        addClass(item, 'hidden');
    });

    // and we show the one referenced by the element we've clicked...
    removeClass(document.getElementById(show), 'hidden');
}

function addClass(el, className) {
  var cls = el.className.match(/\S+/g) || [];  
  if (!hasClass(el, className)) {
    cls.push(className);
  }
  el.className = cls.join(' ');
}

function removeClass(el, className) {
  var cls = el.className.match(/\S+/g) || [];  
  if (hasClass(el, className)) {
    cls.pop(className);
  }
  el.className = cls.join(' ');    
}

function hasClass(el, className) {
  var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
  return re.test(el.className);
}

However, I strongly suggest using a javascript library such as JQuery for DOM manipulation and don't get carried away like myself and write vanilla javascript...

Upvotes: 0

Arumoy Roy
Arumoy Roy

Reputation: 108

function pokazMail(IDtoShow,IDtoHide) {
document.getElementById(IDtoShow).style.display = 'block';
document.getElementById(IDtoHide).style.display = 'none';
}
#mail{display:none;}
#wizyta{display:none;}
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail','wizyta');">First.</a>
<a class="btn btn-primary btn-lg" onclick="pokazMail('wizyta','mail');">Second.</a>
<div id="mail">dsjdhs </div>
<div id="wizyta">12313213</div>

Upvotes: 1

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

I guess you can use Jquery since I see you using bootstrap classes. Using your approach checking if the display is block then hiding it: 

//javascript
function pokazMail(ID) {

    if($("#wizyta").css('display') == "block"){
        $("#wizyta").css("display", "none");
    }
    $("#mail").css("display", "block");
}

function pokazWizyta(ID) {

    if($("#mail").css('display') == "block"){
        $("#mail").css("display", "none");
    }
    $("#wizyta").css("display", "block");
}

//css
#mail{display:none;}
#wizyta{display:none;}

<!--html-->
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a>
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a>
<div id="mail">dsjdhs </div>
<div id="wizyta">12313213</div>

Upvotes: 0

Luka Krajnc
Luka Krajnc

Reputation: 915

You should use jQuery methods like .hide() and .show()

Here is and example of using it:

function pokazMail(ID) {
    $("#mail").show();
    $("#wizyta").hide();
}

function pokazWizyta(ID) {
    $("#mail").hide();
    $("#wizyta").show();
}

jsFiddle

function pokazMail(ID) {
    $("#mail").show();
    $("#wizyta").hide();
}

function pokazWizyta(ID) {
    $("#mail").hide();
    $("#wizyta").show();
}
#mail{display:none;}
#wizyta{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a>
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a>
<div id="mail">dsjdhs </div>
<div id="wizyta">12313213</div>

Upvotes: 0

Related Questions