JS match list item color with selected item

Question

I'm trying to get the .title color to match the selected .cat-item but I can't figure out how to work it into my code.

 var $container = $(".cat-dropdown-menu"), $list = $(".cat-dropdown-menu .cat-list"), listItem = $list.find(".cat-item"); $(".cat-dropdown .title").click(function() { if ($container.height() > 0) { closeMenu(this); } else { openMenu(this); } }); $(".cat-dropdown-menu .cat-item").click(function() { closeMenu(this); }); function closeMenu(el) { $(el) .closest(".cat-dropdown") .toggleClass("closed") .find(".title") .text($(el).text()); $container.css("height", 0); $list.css("top", 0); } function openMenu(el) { $(el) .parent() .toggleClass("closed"); $container.css({ height: 200 }); } 

 @charset "UTF-8"; /* OPTIONS */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cat-dropdown { text-align: left; color: #343c3f; border: 1px solid #a2acb0; } .cat-dropdown.closed .cat-dropdown-menu { margin-top: 0px; } .cat-dropdown.closed .cat-dropdown-menu .cat-item { height: 0px; } .cat-dropdown.closed .title { border-bottom: none; } .cat-dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .cat-dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #d9e1e4; } .cat-dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .cat-dropdown .cat-dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box"; } .cat-dropdown .cat-list { position: absolute; top: 0; width: 100%; } .cat-dropdown .cat-list .cat-item { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #d9e1e4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s; } .cat-dropdown .cat-list .cat-item:hover { background-color: #d9e1e4; color: #343c3f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-dropdown closed"> <div class="title">Pick user</div> <div class="cat-dropdown-menu"> <ul class="cat-list"> <li class="cat-item" style="color:#3772b1">Henry Christensen</li> <li class="cat-item" style="color:#4eaddc">Lamar Flynn</li> <li class="cat-item" style="color:#ff9148">Jameson Davidson</li> </ul> </div> </div> 

Answer 1

Add .css('color', el.style.color); :

 var $container = $(".cat-dropdown-menu"), $list = $(".cat-dropdown-menu .cat-list"), listItem = $list.find(".cat-item"); $(".cat-dropdown .title").click(function() { if ($container.height() > 0) { closeMenu(this); } else { openMenu(this); } }); $(".cat-dropdown-menu .cat-item").click(function() { closeMenu(this); }); function closeMenu(el) { $(el) .closest(".cat-dropdown") .toggleClass("closed") .find(".title") .text($(el).text()) .css('color', el.style.color); $container.css("height", 0); $list.css("top", 0); } function openMenu(el) { $(el) .parent() .toggleClass("closed"); $container.css({ height: 200 }); } 

 @charset "UTF-8"; /* OPTIONS */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cat-dropdown { text-align: left; color: #343c3f; border: 1px solid #a2acb0; } .cat-dropdown.closed .cat-dropdown-menu { margin-top: 0px; } .cat-dropdown.closed .cat-dropdown-menu .cat-item { height: 0px; } .cat-dropdown.closed .title { border-bottom: none; } .cat-dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .cat-dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #d9e1e4; } .cat-dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .cat-dropdown .cat-dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box"; } .cat-dropdown .cat-list { position: absolute; top: 0; width: 100%; } .cat-dropdown .cat-list .cat-item { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #d9e1e4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s; } .cat-dropdown .cat-list .cat-item:hover { background-color: #d9e1e4; color: #343c3f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-dropdown closed"> <div class="title">Pick user</div> <div class="cat-dropdown-menu"> <ul class="cat-list"> <li class="cat-item" style="color:#3772b1">Henry Christensen</li> <li class="cat-item" style="color:#4eaddc">Lamar Flynn</li> <li class="cat-item" style="color:#ff9148">Jameson Davidson</li> </ul> </div> </div> 

Answer 2

take a look at the code added in closemenu()

 var $container = $(".cat-dropdown-menu"), $list = $(".cat-dropdown-menu .cat-list"), listItem = $list.find(".cat-item"); $(".cat-dropdown .title").click(function() { if ($container.height() > 0) { closeMenu(this); } else { openMenu(this); } }); $(".cat-dropdown-menu .cat-item").click(function() { closeMenu(this); }); function closeMenu(el) { $(el) .closest(".cat-dropdown") .toggleClass("closed") .find(".title") .text($(el).text()); $container.css("height", 0); document.getElementById('pick').style.color = el.style.color; $list.css("top", 0); } function openMenu(el) { $(el) .parent() .toggleClass("closed"); // console.log(el) $container.css({ height: 200 }); } 

 @charset "UTF-8"; /* OPTIONS */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cat-dropdown { text-align: left; color: #343c3f; border: 1px solid #a2acb0; } .cat-dropdown.closed .cat-dropdown-menu { margin-top: 0px; } .cat-dropdown.closed .cat-dropdown-menu .cat-item { height: 0px; } .cat-dropdown.closed .title { border-bottom: none; } .cat-dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .cat-dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #d9e1e4; } .cat-dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .cat-dropdown .cat-dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box"; } .cat-dropdown .cat-list { position: absolute; top: 0; width: 100%; } .cat-dropdown .cat-list .cat-item { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #d9e1e4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s; } .cat-dropdown .cat-list .cat-item:hover { background-color: #d9e1e4; color: #343c3f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-dropdown closed"> <div id='pick' class="title">Pick user</div> <div class="cat-dropdown-menu"> <ul class="cat-list"> <li class="cat-item" style="color:#3772b1">Henry Christensen</li> <li class="cat-item" style="color:#4eaddc">Lamar Flynn</li> <li class="cat-item" style="color:#ff9148">Jameson Davidson</li> </ul> </div> </div>