It is necessary for me that after the function of pressing the button has worked, without reloading the page, use it again in other content divs.

<script> $('#loadmore').click(function(){ $('#mores').css("display", "inherit"); $(this).css("display", "none") }); </script>

  • one
    The essence of the problem is not completely clear. What prevents to use? - dev_null
  • I have a lot of containers with different content, they are tied to the select list. When I select something in the select, the corresponding container with the contents is shown, 18 photos, in each container there is a View More button, by clicking on which a hidden container appears with additional photos in this container. My code for this button works, but only once in one container. If after clicking on it in container 1, I select container 4 in the select and it loads, then the view more button no longer works. How to make the button to work in all containers and not just once? - Vadim
  • I don’t know how in jquery, but pure js will select only the first element when fetching by ID - dev_null
  • But I think this is not the case, jquery will most likely select all the elements. Alternatively, hang events after loading the appropriate container. If it suits, I can throw a version on pure js (I dislike jquery) - dev_null
  • Throw, please! :-) - Vadim

3 answers 3

Do not use duplicate id on your page. This attribute must uniquely identify the element - hence the name. Replace them with class="loadmore" and class="mores" .

 $('.loadmore').click(function(){ $(this).closest(".row").find('.mores').css("display", "inherit"); $(this).css("display", "none") });

PS It would be logical to give a link to your previous question in order to give the respondents the context in which the code in the question is executed.

  • Great option! Thank. This is how it works: <script> $ (document) .ready (function () {$ ('. Mores'). Hide (); $ ('. More'). Click (function () {$ (this) .closest (". row"). find ('. mores'). slideToggle ('slow');})}}; </ script> - Vadim
  • @Vadim Please. Happy to help. - Igor
  • "PS It would be logical to give a link to your previous question in order to give the respondents the context in which the code in the question is executed." The project is still on LAN, I don’t even know its future domain :) - Vadim

 function loadContainer() { var select = document.querySelector('[name=js-containers]'); var selectedOption = select.options[select.selectedIndex].value; var containers = document.querySelectorAll('.js-container'); containers.forEach(function(el){ el.style.display = 'none'; }); var currentContainer = document.querySelector(selectedOption); currentContainer.style.display = 'block'; currentContainer.querySelector('.js-hidden').style.display = 'none'; currentContainer.querySelector('.js-view-more').style.display = 'block'; currentContainer.querySelector('.js-view-more').addEventListener('click', function(evt){ evt.target.style.display = 'none'; currentContainer.querySelector('.js-hidden').style.display = 'block'; }); } document.addEventListener('DOMContentLoaded', function() { loadContainer(); document.querySelector('[name=js-containers]').addEventListener('change', loadContainer); }); 
 .js-container { display: none; } .js-hidden { display: none; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="js-containers"> <option value="#js-container1">Container 1</option> <option value="#js-container2">Container 2</option> <option value="#js-container3">Container 3</option> <option value="#js-container4">Container 4</option> <option value="#js-container5">Container 5</option> </select> <div class="js-container" id="js-container1"> <div class="js-visible">Visible part of container 1</div> <div class="js-hidden">Hidden part of container 1</div> <button class="js-view-more">View more</button> </div> <div class="js-container" id="js-container2"> <div class="js-visible">Visible part of container 2</div> <div class="js-hidden">Hidden part of container 2</div> <button class="js-view-more">View more</button> </div> <div class="js-container" id="js-container3"> <div class="js-visible">Visible part of container 3</div> <div class="js-hidden">Hidden part of container 3</div> <button class="js-view-more">View more</button> </div> <div class="js-container" id="js-container4"> <div class="js-visible">Visible part of container 4</div> <div class="js-hidden">Hidden part of container 4</div> <button class="js-view-more">View more</button> </div> <div class="js-container" id="js-container5"> <div class="js-visible">Visible part of container 5</div> <div class="js-hidden">Hidden part of container 5</div> <button class="js-view-more">View more</button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </body> </html>

  • Thank you, but it doesn’t work for me quite the way I need it and an error in the browser for some reason. You can ask for help to insert the function: $ (document) .ready (function () {$ ('# mores'). Hide (); $ (' # loadmore '). Click (function () {/ * $ (' # mores ') .css ("display", "inherit"); /*$(this ).css("display "," none "); * / $ (' # mores'). slideToggle ('slow'); return false;});}); inward: $ ('# selectportf'). on ('change', function () {var value = $ (this) .val (); $ (". cont"). addClass ("hidden"); $ (" # "+ value) .removeClass (" hidden ");}); - Vadim
  • If it works here, but not in the code, it means that it did not include the necessary classes and IDs in the markup. js-container, js-visible, js-hidden, js-view-more, name = "js-containers" - dev_null

If I understood correctly:
Your code hides the first block and show the second.
You also want the opposite of the action (hide the second, show the first).

If so, then you only need to implement the action in reverse.
You can do it yourself, or use my option.

 $('.aa, .bb').on('click',function(){ if($(this).hasClass('aa')){ // Если .aa $(this).hide(); // Прячем .aa $('.bb').show(); // Показываем .bb } else if($(this).hasClass('bb')) { // Если .bb $(this).hide(); // Прячем .bb $('.aa').show(); // Показываем .aa } }); 
 .aa, .bb { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; cursor: pointer; } .aa { background: red; } .bb { background: blue; color: #fff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="aa">a</div> <div class="bb" style="display: none;">b</div>

  • Not certainly in that way. I have a lot of containers with different content, they are tied to the select list. When I select something in the select, the corresponding container with the contents is shown, 18 photos, in each container there is a View More button, by clicking on which a hidden container appears with additional photos in this container. My code for this button works, but only once in one container. If after clicking on it in container 1, I select container 4 in the select and it loads, then the view more button does not work anymore. I ask for advice on how to make it work in all containers - Vadim