Open/Close New DIV Along With Old DIV On Click

Playing with DIV in HTML-CSS is too awesome but it will become more awesome when you need it to make your look more awesome and eye catching from user end so you can add these types of widgets on your web page or blog with some cool stuff in it to make your web page and blog attractive.

NOw here we have an awesome Open/Close New DIV Along With Old DIV that will open a DIV on click then if you will open another DIV then it will open a new DIV by sliding other already open DIV and can do so on and if you will code a DIV then it will put the other DIV on the position of close one. So now have a look on Open/Close New DIV Along With Old DIV and then garb the ready to use already check snippet of Open/Close New DIV Along With Old DIV from below.

Features:

1.) JQuery File Added.
2.) JQuery Codes Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Mobile Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<script src="https://code.jquery.com/jquery-2.0.0b1.js"></script>
<script>
$(document).ready(function() {
$('#one').hide();
$('#two').hide();
$('#three').hide();
$("li a").click(function () {
event.preventDefault();
var blockID = $(this).attr('href');
$(blockID).animate({width: 'toggle'});
});
});
</script>

JavaScript/JQuery:

<style>
.box {
width:300px;
height:300px;
padding: 0px;
float:left;
}
#one .box {
background:red;
}
#two .box {
background:blue;
}
#three .box {
background:green;
}
ul li {
display:inline;
padding-right:10px;
list-style:none;
}
</style>

JavaScript/JQuery:

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div id="one">
<div class="box">
</div>
</div>
<div id="two">
<div class="box">
</div>
</div>
<div id="three">
<div class="box">
</div>
</div>

Customization:

1.) HTML-CSS-JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…