CODEWITHSUNDEEP
jqueryhtmlcss
Max
Max

Reputation: 708

Treeview with dropdown sublist in CSS

I'm styling an HTML treeview with CSS and I'm trying to make sublists apear sliding down when expanding a node.

Here is my simplified index.html :

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="node">
      Div-1
      <div class="children">
        <div class="node">
          Div-1-1
        </div>
      </div>
    </div>
    <div class="node">
      Div-2
    </div>
  </body>

</html>

Here is the script.js :

$(document).ready(function() {
  $('.node').click(function(event) {
    $(event.target).toggleClass('expanded');
  });
});

And the style.css :

.node {
  border: solid 1px red;
}
.node > .children {
  border: solid 1px lightblue;
  overflow: hidden;
  padding-left: 10px;
  max-height: 0;
  transition: max-height .5s ease-in;
}
.node.expanded > .children {
  display: block;
  max-height: 50px;
}

The result (see. plunkr1) is fine BUT the sublist is not sliding down, it's the rest of the tree that is sliding down revealing the sublist.

So I tried something else, I wrapped the "children" div :

<body>
  <div class="node">
    Div-1
    <div class="childrenWrapper">
      <div class="children">
        <div class="node">
          Div-1-1
        </div>
      </div>
    </div>
  </div>
  <div class="node">
    Div-2
  </div>
</body>

And changed the CSS :

.node {
  border: solid 1px red;
}
.node > .childrenWrapper {
  border: solid 1px lightblue;
  overflow: hidden;
  padding-left: 10px;
}
.node > .childrenWrapper > .children {
  transform: translateY(-100%);
  transition: transform .5s ease;
}
.node.expanded > .childrenWrapper > .children {
  transform: translateY(0);
}

Now (see. plunkr2) the sublist is properly sliding, BUT the wrapping div with the needed overfow hidden keeps the size of the sublist wich is pretty ugly.

I can't find a solution to this issue. Any idea ?

Upvotes: 0

Views: 1221

Answers (1)

leonsaysHi
leonsaysHi

Reputation: 375

Change CSS like this : 

.node > .childrenWrapper {
    transition:height .5s;
    height: 0;
}
.node.expanded > .childrenWrapper {
    height:auto;
}

And JS like : 

$(document).ready(function () {
    $('.node').click(function (event) {
        var $e = $(this),
            $childrenWrapper = $e.find('.childrenWrapper'),
            $children = $e.find('.children'),
            h = $e.is('.expanded') ? 0 : $children.height(); // target height depending on it being expanded or not.
        $childrenWrapper.height(h); // applying height to the childrenWrapper (see css transition on .node > .childrenWrapper)
        $(this).toggleClass('expanded');
    });
});

Demo : https://jsfiddle.net/49te34wx/

And by the way : $(event.target).toggleClass('expanded'); could be $(this).toggleClass('expanded');

Upvotes: 1

Related Questions