function initToggler() { $(document).on('click','.toggler', function(){ var $this = $(this); $this.addClass('open').next('.element').slideDown(); }); $(document).on('click','.open.toggler', function(){ var $this = $(this); $this.removeClass('open').next('.element').slideUp(); }); } $(initToggler);
<div class="toggler"> Je suis un déclancheur </div> <div class="element"> je suis le contenu </div> <div class="toggler"> Je suis un déclancheur </div> <div class="element"> je suis le contenu </div> <div class="toggler"> Je suis un déclancheur </div> <div class="element"> je suis le contenu </div> <div class="toggler"> Je suis un déclancheur </div> <div class="element"> je suis le contenu </div>
.toggler { margin-top: 10px ; padding: 0 10px; width: 912px;height: 29px; line-height:29px; border: 1px solid #bfbfbf; /* stroke */ cursor:pointer; background-color: #ddd; /* layer fill content */ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDkzMiAyOSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWRlZGVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmRmZGZkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI5MzIiIGhlaWdodD0iMjkiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */ background-image: -moz-linear-gradient(bottom, #ededed 0%, #fdfdfd 100%); /* gradient overlay */ background-image: -o-linear-gradient(bottom, #ededed 0%, #fdfdfd 100%); /* gradient overlay */ background-image: -webkit-linear-gradient(bottom, #ededed 0%, #fdfdfd 100%); /* gradient overlay */ background-image: linear-gradient(bottom, #ededed 0%, #fdfdfd 100%); /* gradient overlay */ } .element {display:none; padding: 10px; background: #F9F9F9;border: 1px solid #bfbfbf; border-top: none;}