javascript - Toggleclass button not working? -

javascript - Toggleclass button not working? -

why can not toggle box button? want toggle box too?

here 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'); });

your exclusion status not(this) not correct. here this .button element not .timelinetile element.

so

$('.button').click(function (e) { e.stoppropagation(); var $timeline = $(this).siblings('.timelinetile').toggleclass('clicked'); $('.timelinetile').not($timeline).removeclass('clicked'); });

demo:

class="snippet-code-js lang-js prettyprint-override">$(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'); }); class="snippet-code-css lang-css prettyprint-override">.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; } } class="snippet-code-html lang-html prettyprint-override"><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>

javascript jquery html toggle toggleclass