Show one div hide another on click?

Hi please help?

I have 3 divs:

<div>default or one</div>
<div>2</div>
<div>3</div>

I wanna show default or one div on load meaning it will always be visible and divs 2 and 3 hidden.

Now when you click on 2 or 3 it will show its content and hide the rest!

How will the user know to click on 2 or 3 if they are hidden from the user initially?

I have found this solution but the problem is when you click send time on a visible div it hides it how to fix that?
http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/

Are you just looking for “tabs”?

1 Like

This is exactly what I need thanks so much. Is supported by all browsers?

Is there a way to use anchor link and not input?

Yes,

And why do you want an anchor instead of an input? That defeats the point of this technique :slight_smile: .

Thanks buddy!

The problem is I can’t align them inline-block

I would like to show it like this:

<div>The link</div><div>The content</div>

Can we get a live demo showcasing this issue? The tabs in the demo are automatically side-by-side; did you copy the code from the demo? Should have it already set up for you.

Could please help me with this javascript:

<!DOCTYPE html>
<html>
<head>
<title>Show and hide multiple DIV using JavaScript</title>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script>
    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Menu1');">Menu1</a> | <a href="#" onclick="toggleVisibility('Menu2');">Menu2</a> | <a href="#" onclick="toggleVisibility('Menu3');">Menu3</a> | <a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>
</div>
<div class="inner_div">
<div id="Menu1">I'm container one</div>
<div id="Menu2" style="display: none;">I'm container two</div>
<div id="Menu3" style="display: none;">I'm container three</div>
<div id="Menu4" style="display: none;">I'm container four</div>
</div>
</div>
</body>
</html>

All I want is to add a code like this:

If you toggleVisibility and the div is visible do nothing else hide it

Anyone brave enough to help me out :slight_smile:

My vanilla js is rubbish but here’s my attempt :smile:

<!DOCTYPE html>
<html>
<head>
<title>Show and hide using JavaScript</title>
<style>
.main_div {
	text-align:center;
	background: #00C492;
	padding:20px;
	width: 400px;
}
.inner_div {
	background: #fff;
	margin-top:20px;
	height: 100px;
}
.buttons a {
	font-size: 16px;
}
.buttons a.active,.buttons a.focus{background:#fff} 
.buttons a:hover {
	cursor:pointer;
	font-size: 16px;
}
.tabcontent{display:none}
.tabcontent.active{display:block}
</style>
<script>

</script>
</head>
<body>
<div class="main_div">
		<div id="tabs" class="buttons"> <a class="tabs active" href="#Menu1">Menu1</a> | <a class="tabs" href="#Menu2">Menu2</a> | <a class="tabs" href="#Menu3">Menu3</a> | <a class="tabs" href="#Menu4">Menu4</a> </div>
		<div id="tabcontent" class="inner_div">
				<div class="tabcontent active" id="Menu1">I'm container one</div>
				<div class="tabcontent" id="Menu2">I'm container two</div>
				<div class="tabcontent" id="Menu3">I'm container three</div>
				<div class="tabcontent" id="Menu4">I'm container four</div>
		</div>
</div>
<!-- keep script at end of html -->
<script>
(function() {
	    "use strict";
	    var className = "active";
	    var tabcontent = ".tabcontent";
	    var tabs = ".tabs";

	    function init() {
	        if (document.getElementById && document.createTextNode) {
	            var tabtrigger = document.getElementById('tabs').getElementsByTagName('a');
	            for (var i = 0; i < tabtrigger.length; i++) {
	                addClicks(tabtrigger, i);
	            }
	        }
	    }

	    function addClicks(tabtrigger, i) {
	        tabtrigger[i].onclick = function() {
	            show(tabtrigger[i]);
	            return false;
	        };
	    }

	    function show(l) {
	        hideTabs(tabcontent);
	        hideTabs(tabs);
	        var id = l.href.match(/#(\w.+)/)[1];
	        var el = document.getElementById(id);
	        addClassname(el, className);
	        addClassname(l, className);
	    }

	    function hideTabs(tabcontent) {
	        var tabContent = document.querySelectorAll(tabcontent);
	        for (var i = 0; i < tabContent.length; i++) {
	            removeClassname(tabContent[i], className);
	        }
	    }

	    function addClassname(el, className) {
	        if (el.classList) {
	            el.classList.add(className);
	        } else {
	            el.className += ' ' + className;
	        }
	    }

	    function removeClassname(el, className) {
	        if (el.classList) {
	            el.classList.remove(className);
	        } else {
	            el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
	        }
	    }

	    init();
	})();
</script>

</body>
</html> 

It adds a class to do the hiding and showing so that css can do the presentation and gives you a hook to add extra styling. The href supplies the destination of the target div and the click handlers have been moved to the js and not in the html.

It uses js ‘querySelector’ so will ony work in IE8 upwards (and all other modern browsers). The code could likely be tidied up quite a bit also.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.