CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blutuu
blutuu

Reputation: 590

Move divs down when top div expands

I'm trying to create an expanding menu where each header controls a div of links. In fact, everything in my code is made of divs (i.e. headers and content). Whenever I click a header div, the content div grows and reveals its contents. My problem is is that the content div pushes everything else out of the way. It squeezes itself into the middle. What I want is a fixed active header while everything below it and its contents is pushed down. 

$(document).ready(function() {
  var $switch = 1;
  var $last;

  // Closes drawers. Removes header 
  // selections.
  function clear() {
    $(".m-title").removeClass("active");
    $(".drawer").removeClass("open");
    $last = null;
  }

  /* • Opens/Closes drawer by its header. 
     • Enables consistent opening/closing of
       the same drawer.*/
  function load(element) {
    var $temp = element.index();

    if ($temp == $last)
      clear();
    else {
      clear();
      element.addClass("active");
      element.next().addClass("open");
      $last = element.index();
    }

  }

  // Listens for header clicks.
  $(".m-title").click(function() {
    load($(this));
  });

  // Does the same thing as clear(), but with   // a button.
  $("#button").click(function() {
    $(".m-title").removeClass("active");
    $(".drawer").removeClass("open");
  });

});
body {
  background: #595959;
}
#container {
  display: flex;
  justify-content: center;
  /*End FLEX*/
  min-width: 350px;
  width: 65%;
  height: 700px;
  margin-right: auto;
  margin-left: auto;
  background: #191919;
  border: solid 1px #101010;
  box-shadow: -1px 1px 0px 0px #555;
}
#m-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  /*End FLEX*/
  min-width: 300px;
  max-width: 500px;
  width: 65%;
  height: auto;
  border: solid 1px red;
  color: wheat;
}
.m-title {
  display: flex;
  justify-content: center;
  align-self: center;
  /*End FLEX*/
  width: 100%;
  border: solid 1px black;
  transition: .5s;
}
.m-title:hover {
  background: rgba(60, 60, 60, 0.5);
  cursor: pointer;
  transition: .5s;
}
.m-title:active {
  background: rgba(75, 75, 75, 0.5);
  transition: .1s;
}
.m-title span {
  align-self: center;
  /*End FLEX*/
  font-family: sans-serif;
  font-size: 24px;
  padding: 24px;
}
.m-title.active {
  background: rgba(160, 60, 60, 0.5);
  /*Highlights active header*/
}
.drawer {
  height: 0px;
  /*Closes drawer*/
  width: 100%;
  border: solid 1px green;
  align-self: center;
  transition: .5s;
}
.drawer.open {
  height: 100px;
  position: relative;
  transition: .5s;
}
#button {
  display: flex;
  justify-content: center;
  width: 75px;
  height: 50px;
  background: green;
}
#button:hover {
  cursor: pointer;
}
#button span {
  align-self: center;
}
<div id="container">
  <div id="m-wrap">
    <div id="m-map" class="m-title"> <span>Site Map</span>
    </div>
    <div id="m-draw1" class="drawer"></div>
    <div id="m-about" class="m-title"> <span>About</span>
    </div>
    <div id="m-draw2" class="drawer"></div>
    <div id="m-emp" class="m-title"> <span>Employee Services</span>
    </div>
    <div id="m-draw3" class="drawer"></div>
    <div id="m-serv" class="m-title"> <span>Services</span>
    </div>
    <div id="m-draw4" class="drawer"></div>
    <div id="button"> <span>clear</span>
    </div>
  </div>
</div>

Here's a fiddle of what I've created. Funnily enough, the sidebar of jsfiddle acts the way I want my menu to act. Could this be done with all divs or should I go about this in another way?

Upvotes: 3

Views: 5509

Answers (2)

Asons
Asons

Reputation: 87251

To make it push down, change this in your css:

#m-wrap {
  display: flex;
  flex-direction: column;
  /* justify-content: center;          commented out   */
  /* align-self: center;               commented out   */

Update on commented request

To center it within its container you can do like this:

#container {
  display: flex;
  justify-content: center;
  /*End FLEX*/

  min-width: 350px;
  width: 65%;
  /* height: 700px;             commented out   */
  padding: 100px 0;         /*  added padding   */

Upvotes: 3

goupil
goupil

Reputation: 175

Just remove or change the display property of the div id="container". You may be abble to give a position to that div using css or jquery.

Upvotes: 0

Related Questions