i have custom accordion, jquery ui accordion. trying make expanded item collapsible (if clicked again). this: https://jqueryui.com/accordion/#collapsible unable figure out how capture click event on expanded item. can point me right direction?
<div class="dropdown"> <div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>timecard error message</div> <div class="style2 dropdown-container" style="display: none"> <div class="externalclassa37e015771db4a43afaa85e21f07e758"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! </p> </div> </div> </div> <div class="dropdown"> <div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">worklist emails</div> <div class="style2 dropdown-container" style="display: none;"> <div class="externalclassa7d39e7bcbce48a791e0f84e3631cc00"> lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! </div> </div> </div> and jquery sth below:
$(document).ready(function(){ $('div.dropdown').each(function() { var $dropdown = $(this); $(".dropdown-link", $dropdown).click(function(e) { e.preventdefault(); $("div.dropdown-link").css('background-image',''); //reset background css background takes on $("div.dropdown-container").css('display','none'); $("div.dropdown-link").css('background-color','#54585a'); $("div.dropdown-link").css('border','none'); if($("div.dropdown-container", $dropdown).css('display','none')){ $("div.dropdown-link", $dropdown).css('background-color','#4b4e50'); $("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'}); $("div.dropdown-container", $dropdown).css('display','inline-block'); $("div.dropdown-link", $dropdown).css('background-image','url("/siteassets/arrowdown.png")'); }else{ $("div.dropdown-link", $dropdown).css('background-image','url("/siteassets/img/arrow.png")'); $("div.dropdown-container", $dropdown).css('display','none'); $("div.dropdown-link", $dropdown).css('background-color','#54585a'); $("div.dropdown-link", $dropdown).css('border', 'none'); } return false; }); }); }); here jsbin: http://jsbin.com/hazaxunuwa/edit?html,css,js,output
its not idea use javascript changing lot of styles while can css. should include 1 class on .dropdown when active. below sample code i've moved styles css:
$(document).ready(function(){ $('div.dropdown').each(function() { var $dropdown = $(this); var $dropdownlink = $dropdown.find('.dropdown-link'); $dropdownlink.click(function(e) { e.preventdefault(); var currentblock = $(this).closest('.dropdown'); if(currentblock.hasclass('slide-active')) { currentblock.removeclass('slide-active'); } else { $('div.dropdown').removeclass('slide-active'); currentblock.addclass('slide-active'); } }); }); });.dropdown-link { background: #54585a; } .dropdown-container { display: none; } .slide-active .dropdown-container { display: block; } .slide-active .dropdown-link { border-bottom: 1px dotted white; background: #4b4e50; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="dropdown"> <div class="style1 dropdown-link">timecard error message</div> <div class="style2 dropdown-container"> <div class="externalclassa37e015771db4a43afaa85e21f07e758"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! </p> </div> </div> </div> <div class="dropdown"> <div class="style1 dropdown-link">worklist emails</div> <div class="style2 dropdown-container"> <div class="externalclassa7d39e7bcbce48a791e0f84e3631cc00"> lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! </div> </div> </div> <div class="dropdown"> <div class="style1 dropdown-link">unable enter future timecard</div> <div class="style2 dropdown-container"> <div class="externalclassd8605e4c12364c5685331d8368e84e8a"> lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! </div> </div> </div>
Comments
Post a Comment