user3005003 user3005003 - 4 months ago 15
HTML Question

Expand/Collapse divs that push over divs down the page

I have 9 squares on a page, when you click on a square I want a full width div to appear underneath it and push the over squares down.

I've been trying to follow a tutorial to understand the JS behind this, but I can't get it to work.

Codepen:
http://codepen.io/SaraTez/pen/QEmPjX

<ul class="grid-list">
<li class="li">One</li>
<li class="li">Two</li>
<li class="li">Three</li>
<li class="li">Four</li>
<li class="li">Five</li>
<li class="li">Six</li>
<li class="li">Seven</li>
<li class="li">Eight</li>
<li class="li">Nine</li>
<li class="li">Ten</li>
</ul>


JS

$(".grid-list .li").click(function(){
var .li=$(this);

if ($(this).hasClass("active")) {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
}
else {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
var cloned=.li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
.li.addClass("active").after(cloned);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 400);
}
});

$(document).on("click", ".cloned-expand-close", function(){
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
});


The boxes are displaying as they should but there's no function happening on click, so I think it's a JS problem/syntax with my html.

Could anyone help fix this? or alternatively if you have seen any good examples of what I finally want to achieve that would be good

Answer

Its not working because you defined your variable wrongly.

Define like this :

var li=$(this);

    $(".grid-list .li").click(function(){
        var li=$(this);

        if ($(this).hasClass("active")) {
            $(".grid-list .li.cloned-expand").remove();
            $(".grid-list .li").removeClass("active");
        }
        else {
            $(".grid-list .li.cloned-expand").remove();
            $(".grid-list .li").removeClass("active");
            var cloned=li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
            li.addClass("active").after(cloned);
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 400);
        }
    });

    $(document).on("click", ".cloned-expand-close", function(){
        $(".grid-list .li.cloned-expand").remove();
        $(".grid-list .li").removeClass("active");
    });
* {
  box-sizing: border-box;
}
  .li {
    display: inline-block;
    width: 15%;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 1% 10px 0;
    text-align: center;
    position: relative;   
    cursor: pointer;
    &:hover {
      background-color: #eee;
    }
    .li:active {
        background-color: #eee;
        &:after {
          content: '';
          height: 0;
          width: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #000;
          position: absolute;
          bottom: -10px;
          left: 50%;
          margin-left: -5px;
        }
      }
    }
  .cloned-expand{
      display: block;
      float: left;
      min-height: 80px;
      width: 97%;
      margin: 0 0 10px;
      padding: 10px 30px;
      -webkit-animation: fadeinLoad .5s forwards;
      -moz-animation: fadeinLoad .5s forwards;
      animation: fadeinLoad .5s forwards;
      &-close {
        position: absolute;
        right: -1px;
        top: -1px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border: 1px solid;
        text-align: center;        
        cursor: pointer;
    }
  }
}
@-webkit-keyframes fadeinLoad {
    from { opacity: 0;}
    to { opacity: 1; }
}
@-moz-keyframes fadeinLoad {
    from { opacity: 0; -moz-transform: translate(0, -20px); }
    to { opacity: 1; -moz-transform: translate(0, 0); }
}
@keyframes fadeinLoad {
    from { opacity: 0; transform: translate(0, -20px); }
    to { opacity: 1; transform: translate(0, 0); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid-list">
  <li class="li">One</li>
  <li class="li">Two</li>
  <li class="li">Three</li>
  <li class="li">Four</li>
  <li class="li">Five</li>
  <li class="li">Six</li>
  <li class="li">Seven</li>
  <li class="li">Eight</li>
  <li class="li">Nine</li>
  <li class="li">Ten</li>
  </ul>

Here is the jsFiddle

Hope it helps :)