CODEWITHSUNDEEP
jqueryhtmlcss
Volkan
Volkan

Reputation: 546

DIV Slide to the left, stay on top and reduce to a smaller width

Here is original idea, helped by @Tom RNS: JSFIDDLE

    $(document).ready(function () {
       $("#moving").click(function () {
          $("#moving").toggleClass("left");
        });
    });

This works fine... But, I need to refine it a little bit:

Originally the DIVs remain 50% of width, but when the sliding DIV is clicked I need it to be reduced to a third of the width, and make the revealed right DIV two thirds...

Is that possible? and how? Thank you!

Upvotes: 0

Views: 403

Answers (3)

eMTH
eMTH

Reputation: 83

You can try doing this by adding a class to the right element, too.

jQuery:

$(document).ready(function() {
   $("#moving").click(function(){
      $("#moving").toggleClass("left");
       $("#right").toggleClass("right");
   });
});

CSS:

#moving.left{
    left:0;
    width: 33.33%;
}
#right.right{
    width: 66.66%;
    margin-left: -16.66%;
}

Here's an example: https://jsfiddle.net/mq2c2129/14/

Upvotes: 1

Elheni Mokhles
Elheni Mokhles

Reputation: 4001

do you mean like this ?

https://jsfiddle.net/m46wLz0n/

<div id="wrapper">
        <div id="left" >
        <p>Left side</p>
    </div>
    <div id="right">
        <p>Right side</p>
    </div>
    <div id="moving">
        <p>Moving div</p>
    </div>
</div>

Css

#wrapper{
    position: relative;
}
#left{
    background-color: red;
    width:50%;
    height:150px;
    float: left;
    transition: width 0.5s;
}
#left.smallerLeft{
     width:33.33%;    
}
#right{
    background-color: green;
    width: 50%;
    height:150px;
    float: left;
    transition: width 0.5s;
}
#right.biggerRight{
    width:66.66%;
}
#moving{
    background-color: blue;
    width:50%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}
#moving.left{
    left:0;
    width:33.33%;
}

Javascript 

  $(document).ready(function() {
     $("#moving").click(function(){
        $("#moving").toggleClass("left");
        $("#right").toggleClass("biggerRight");
        $("#left").toggleClass("smallerLeft");
     });
  });

Upvotes: 2

Matteo Rubini
Matteo Rubini

Reputation: 831

Just a bit tricky but it works..

https://jsfiddle.net/mq2c2129/7/

$(document).ready(function() {
   $("#moving").click(function(){
      $("#left").toggleClass("left");
      $("#moving").toggleClass("left");
      $("#right").toggleClass("left");
   });
});

Upvotes: 2

Related Questions