CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HTMLNoob
HTMLNoob

Reputation: 821

Jquery Sliding Up issue

Ok, the goal of the code below is to have the top-left side slide down and have the bottom-right side slide up.

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(7000);
    /*RIGHT SIDE*/
    $("#main-right").slideDown(2000);
    $("#bottom-right").slideUp(2000);
  });
});
body {
  background-color: gray;
  margin: 0px;
  margin-top: -15px;
  /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
  display: none;
  float: left;
  width: 50%;
  background-color: green;
  padding-bottom: 100%;
  z-index: 1000;
}
#bottom-right {
  display: none;
  background-color: gray;
  padding-bottom: 100%;
  z-index: 1000;
}
#main-left {
  padding-top: 50px;
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: blue;
  z-index: -10;
}
#main-right {
  float: right;
  background-color: red;
  width: 50%;
  padding-bottom: 100%;
  z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
  <section id="top-left">
    <p>Hidden Content</p>
  </section>

  <section id="main-left">
    <p>Main Content</p>
    <button id="slider">Press Me!</button>
  </section>

</section>
<section id="complete-right-side">
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>

  <section id="main-right">
    <p>Side Content</p>
  </section>
</section>

The problem is that whenever the button is pressed the bottom-right section does not slide up as expected.

Thank you in advance to whoever answers or comments on this question :)

Upvotes: 1

Views: 69

Answers (4)

ketan
ketan

Reputation: 19341

You should make changes in Jquery following way. Because slideUp will hide the div and you trying to show the div.

And apply css to float: right; width: 50%; to #bottom-right

<section id="main-right">
    <p>Side Content</p>
  </section>
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>

And also change sequence as above because bottom right div slide from bottom of main div. 

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(7000);
    /*RIGHT SIDE*/
    $("#main-right").slideUp(2500);  //Here
    $("#bottom-right").slideDown(2500); //Here
  }); 
});
body {
  background-color: gray;
  margin: 0px;
  margin-top: -15px;
  /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
  display: none;
  float: left;
  width: 50%;
  background-color: green;
  padding-bottom: 100%;
  z-index: 1000;
}
#bottom-right {
  display: none;
  background-color: gray;
  z-index: 1000;
  float: right;
  width: 50%;
}
#main-left {
  padding-top: 50px;
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: blue;
  z-index: -10;
}
#main-right {
  float: right;
  background-color: red;
  width: 50%;
  padding-bottom: 100%;
  z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
  <section id="top-left">
    <p>Hidden Content</p>
  </section>

  <section id="main-left">
    <p>Main Content</p>
    <button id="slider">Press Me!</button>
  </section>

</section>
<section id="complete-right-side">
  

  <section id="main-right">
    <p>Side Content</p>
  </section>
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>
</section>

Upvotes: 1

Sebin Thomas
Sebin Thomas

Reputation: 289

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(7000);
    /*RIGHT SIDE*/
    $("#bottom-right").slideUp(2000);
    $("#main-right").slideUp(2000);
  });
});
body {
  background-color: gray;
  margin: 0px;
  margin-top: -15px;
  /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
  display: none;
  float: left;
  width: 50%;
  background-color: green;
  padding-bottom: 100%;
  z-index: 1000;
}
#bottom-right {
  display: none;
  background-color: gray;
  padding-bottom: 100%;
  z-index: 2000;
}
#main-left {
  padding-top: 50px;
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: blue;
  z-index: -10;
}
#main-right {
  float: right;
  background-color: red;
  width: 50%;
  padding-bottom: 100%;
  z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
  <section id="top-left">
    <p>Hidden Content</p>
  </section>

  <section id="main-left">
    <p>Main Content</p>
    <button id="slider">Press Me!</button>
  </section>

</section>
<section id="complete-right-side">
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>

  <section id="main-right">
    <p>Side Content</p>
  </section>
</section>

Please Check. I think this is what u r looking for.

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

change your function 

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(1000);
    /*RIGHT SIDE*/
    $("#main-right").slideUp(2000);// Change Here
    $("#bottom-right").slideDown(2000);// Change Here
  });
});

https://jsfiddle.net/xbr1xcxh/4/

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

you need to change the time interval given

like 

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(1000);
    /*RIGHT SIDE*/
    $("#main-right").slideDown(2000);
    $("#bottom-right").slideUp(2000);
  });
});

checkout this Demo

Upvotes: 1

Related Questions