CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cacheira
Cacheira

Reputation: 19

JQuery: div slide to occupy full page

We have a product page that we are dividing in two. My goal is to make it so that when you click one of the divs it slides to fill the whole page and show the products.

http://jsfiddle.net/Sj575/

HTML

<div>
    <div id="green" class="type1">Exterior products</div>
    <div id="red" class="type2">Interior products</div>    
</div>

CSS

.type1 {
    width:300px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.type2{
    width:300px;
    background-color:red;
    display:inline-block;
    height:320px;   
}

Upvotes: 0

Views: 161

Answers (2)

Linus Aronsson
Linus Aronsson

Reputation: 341

with the following jQuery (and some html/css changes), you get this: http://jsfiddle.net/Sj575/274/

$(function() {
 $(".green").click(function() {

    $(".red").toggleClass("hidden");
    $(".green").toggleClass("full")

});

$(".red").click(function() {

    $(".green").toggleClass("hidden");
    $(".red").toggleClass("full")

 });
});

EDIT: Here's another one that slides in instead, http://jsfiddle.net/Sj575/277/

Upvotes: 0

Pavel Kov&#225;ř
Pavel Kov&#225;ř

Reputation: 19

Try this. ;)

http://jsfiddle.net/ph31wyy3/1/

HTML

<div>
    <div id="green" class="green block">eezez</div>
    <div id="red" class="red block">eezez</div>    
</div>

CSS

.green {
    width:400px;
    background-color:green;
    display:block;
    height:320px;
  float: left;
}
.red{
    width:200px;
    background-color:red;
    display:block;
    height:320px;   
  float: left;
}

JS

$(function() {
   $('.block').on('click', function(){
      $('.block').not(this).animate({'width' : '0' }, 500, function() { $(this).hide(); });
      $(this).animate({'width' : '100%'}, 500);
   });
});

Upvotes: 1

Related Questions