CODEWITHSUNDEEP
jqueryhtmlcss
Nicolas Charvoz
Nicolas Charvoz

Reputation: 1509

Hide and Show div on button click

I'm rebuilding a website from scratch and I wanted to know how could I manage to do this :

enter image description here

When I click on one of the two buttons there's another view appearing. How can I achieve this ?

I 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 a slideFromLeft and I want to align button and map.

Upvotes: 3

Views: 1637

Answers (3)

Emre T&#252;rkiş
Emre T&#252;rkiş

Reputation: 1002

combining Deer-Outdoor.nl's answer with the DOM structure below, i think u 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 those divs now have float:left style attribute. you can also put some margin on that second div to create a space between them.

FIDDLE

Upvotes: 1

empiric
empiric

Reputation: 7878

I Updated your 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;
}

DEMO

Upvotes: 2

Refilon
Refilon

Reputation: 3499

How about something like this?

FIDDLE

$( "#b1" ).click(function() {
    $( "#first" ).animate({
        width: "100px",
    }, 1500 );
    $( "#sec" ).animate({
        width: "0px",
    }, 1500 );
});

Upvotes: 2

Related Questions