Don’t really need javascript at all for that if you only want the latest link to be the one that is opened:
div { display: none; }
div:target {display:block}
<ul class="links">
<li><a href="#search">Search</a></li>
<li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here is a jquery solution:
$(document).on('click','.links a',function(e){
e.preventDefault();
var href = $(this).attr('href');
$('div').hide();
$(href).show();
});
div {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li><a href="#search">Search</a></li>
<li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Hide your all divs on load of your document. And just show the respective div on click of the link.
see the working fiddle-
$(document).ready(function() {
$("div").hide();
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div').hide();
$('div' + grabID).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li><a href="#search">Search</a></li>
<li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
You can fix this issue by simply adding the class hide to all targets initially like
$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
e.preventDefault();
var grabID = $(this).attr("href");
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
.hide{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li><a href="#search">Search</a></li>
<li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here you go with a solution using pure JavaScript
document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");
function clickMethod(e) {
var id = e.getAttribute("href").replace("#", "");
document.getElementById(id).classList.toggle("hide");
}
.hide {
display: none;
}
<ul class="links">
<li><a href="#search" onclick="clickMethod(this)">Search</a></li>
<li><a href="#del" onclick="clickMethod(this)">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Define a class name hide which will help you to hide the element and then use the toggle method to toggle the class.
Hope this will help you
Following is my code. My requirement is to hide all div by default through JS. And when click on the link, it should open relevant div with same id.
<ul class="links">
<li><a href="#search">Search</a></li>
<li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
$(document).ready(function() {
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
});
Nice, but you really shouldn’t hide every div element in the page, even for a demo.
That was part of his requirements.
basically my requirement is through JS.
I added a jquery solution for you, although I implemented the ‘hide divs by default’ through CSS. You can do it via javascript as well, but the page will look bad as it loads since all the divs are shown until the page is entirely loaded. If you really need that in javascript as well, then just throw a
