Toggleclass button not working?

Question

Why can i not toggle the box with the button? I want it to do what it currently does but also toggle the box too?

here is my fiddle

my code:

$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
    evt.stopPropagation();
    $('.selected').children().not(this).removeClass('clicked');
    $(this).toggleClass('clicked');


 });
  });

 $(function timelinetiles() {
 $('.button').click(function (e) {
    e.stopPropagation();
 $('.timelineTile').not(this).removeClass('clicked');
 $(this).siblings('.timelineTile').toggleClass('clicked');

  }); });

  $(document).click(function () {
    $('.timelineTile').removeClass('clicked');

  });

Answer 1

Your exclusion condition not(this) is not correct. Here this is the .button element not the .timelineTile element.

So

$('.button').click(function (e) {
    e.stopPropagation();
    var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked');
    $('.timelineTile').not($timeline).removeClass('clicked');

});

Demo:

$(function timelinetiles() {
    $('.timelineTile').click(function (evt) {
        evt.stopPropagation();
        $('.selected').children().not(this).removeClass('clicked');
        $(this).toggleClass('clicked');


    });
});

$(function timelinetiles() {
    $('.button').click(function (e) {
        e.stopPropagation();
        var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked');
        $('.timelineTile').not($timeline).removeClass('clicked');

    });
});

$(document).click(function () {
    $('.timelineTile').removeClass('clicked');

});

.timelineTile.clicked {
    background:red;
    width:500px;
    height:300px;
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s;
}
.selected {
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s;
}
.timelineTile {
    background:black;
    color:white;
    width:200px;
    height:100px;
    margin-bottom:20px;
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s;
}
.timelineTilehold {
    background:pink;
}
.button {
    height:50px;
    width:150px;
    background:Red;
    color:white;
    margin:0px 10px 10px 10px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="timelineTilehold">
    <li class="selected">
        <div class="button">click</div>
        <div class="timelineTile"></div>
    </li>
    <ul class="timelineTilehold">
        <li class="selected">
            <div class="button">click</div>
            <div class="timelineTile"></div>
        </li>
        <ul class="timelineTilehold">
            <li class="selected">
                <div class="button">click</div>
                <div class="timelineTile"></div>
            </li>
        </ul>
    </ul>
</ul>