Hide and show div on click button
I am rebuilding a site from scratch and I wanted to know how I should do this:
When I click on one of the two buttons, another view appears. How can I achieve this?
I've tried this: http://jsfiddle.net/7bqjm1dy/
$("#b1").click(function() {
$("#first").slideDown();
$("#sec").slideUp();
});
$("#b2").click(function() {
$("#sec").slideDown();
$("#first").slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="vertical-align:top; display:inline;">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div>
<div id="first" style="display:none; background-color:red; width:100px; height:200px;"></div>
<div id="sec" style="display:none; background-color:blue; width:100px; height:200px;"></div>
</div>
But it doesn't work the way I want. I want slideFromLeft and I want to align button and map.
+3
source to share
3 answers
I updated my fiddle:
Html
<div style="vertical-align:top; display:inline;" class="buttons">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div class="boxes">
<div id="first" style="background-color:red; width:100px; height:200px;"></div>
<div id="sec" style="display: none; background-color:blue; width:0px; height:200px;"></div>
</div>
Javascript
$("#b1").click(function() {
$("#sec").animate({'width': 0}, 'fast', function(){
$(this).hide();
$("#first").show().animate({'width': '100px'});
});
});
$("#b2").click(function() {
$("#first").animate({'width': 0}, 'fast', function(){
$(this).hide();
$("#sec").show().animate({'width': '100px'});
});
});
CSS
.boxes, .buttons{
float: left;
}
+2
source to share
Combining Deer-Outdoor.nl's answer with the DOM structure below, I think you now have your answer.
<div style="vertical-align:top; display:inline;float:left;">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div style="float:left">
<div id="first"></div>
<div id="sec"></div>
</div>
see that these divs now have a float: left style attribute. you can also put some headroom on that second div to create space between them.
+1
source to share