There is a drop-down list of div elements. When you click on a particular div, you need to transfer its value (image with text) to the header of the list, remove the words "Select a model". After transferring the value, the list should still be expanded and work (when clicking on other elements of the list, their value should also be transferred to the header and replace the previous one).

<div class="select-model-auto"><h3>Выберите модель <span id="arrow-list-icon"></span></h3> <div class="list-model-auto"> <ul > <li><div id="auto1" class="auto"><span>qwerty</span><img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"></div></li> <li><div id="auto2" class="auto"><span>qwerty</span><img src="img/EX_7_new-2a506dc3787c6b7beebff360300b256dda0d5ba6aa86370d2811bbe69e4dd6b0.png" alt="img"></div></li> <li><div id="auto3" class="auto"><span>qwerty</span><img src="img/models-ranks_img-middle-a1f6d80b0aa6110e7e5d30f80304115af08f1041770f25627cc2039e71b78070.png" alt="img"></div></li> <li><div id="auto4" class="auto"><span>qwerty</span><img src="img/models-ranks_img-right-0761cb4392f8a9851d0e29e95a63b3ca659506ba2b32c2e69762602ac9b905ba.png" alt="img"></div></li> <li><div id="auto5" class="auto"><span>qwerty</span><img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"></div></li> </ul> </div> 

  <script> $(document).ready(function() { $('div.select-model-auto').click(function () { $('span').toggleClass('active'); $('div.list-model-auto').slideToggle(400 , function () { }); }); $('div.auto').click(function () { var target = event.target.id; alert(target); // идентифицирует элемент }); }); </script>

    1 answer 1

     $(document).ready(function() { $('div.select-model-auto').click(function() { $('span').toggleClass('active'); $('div.list-model-auto').slideToggle(400, function() {}); }); $('.auto').click(function() { $(".select-model-auto>h3").text('') $(".select-model-auto>h3").append($(this).html()) }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="select-model-auto"> <h3>Выберите модель <span id="arrow-list-icon"></span></h3> <div class="list-model-auto"> <ul> <li> <div id="auto1" class="auto"><span>div1</span> <img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"> </div> </li> <li> <div id="auto2" class="auto"><span>div2</span> <img src="img/EX_7_new-2a506dc3787c6b7beebff360300b256dda0d5ba6aa86370d2811bbe69e4dd6b0.png" alt="img"> </div> </li> <li> <div id="auto3" class="auto"><span>div3</span> <img src="img/models-ranks_img-middle-a1f6d80b0aa6110e7e5d30f80304115af08f1041770f25627cc2039e71b78070.png" alt="img"> </div> </li> <li> <div id="auto4" class="auto"><span>div4</span> <img src="img/models-ranks_img-right-0761cb4392f8a9851d0e29e95a63b3ca659506ba2b32c2e69762602ac9b905ba.png" alt="img"> </div> </li> <li> <div id="auto5" class="auto"><span>div5</span> <img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"> </div> </li> </ul> </div>

    • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦