多个显示和隐藏按钮

Question

I want my show more and hide button to work for multiple text contents, now it's only working for one of them. I have 12 different texts that I want to be able to show and hide with 12 different buttons, like the one in my code. How do I do this?

 var content = document.getElementById("content"); var button = document.getElementById("show-more"); button.onclick = function() { if (content.className == "open") { //shrink the box content.className = ""; button.innerHTML = "Läs mer"; } else { //expand the box content.className = "open"; button.innerHTML = "Dölj"; } }; 

 <div id="content"> Test </div> <a id="show-more">Läs mer</a> 

Answer 1

It is better to use class than id . I have implemented simple snippet where you can design using just class names.

 var content = document.getElementById("content"); $(".showHide").on("click", function() { $(this).parent().find(".more").toggle(); if ($(this).parent().find(".more").is(":visible")) { $(this).text("Show less"); } else { $(this).text("Show more"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="content"> <div class="text"> First text1 <div style="display:none;" class="more">Other text 1</div> <a class="showHide" href="#">Show more</a> </div> <hr /> <div class="text"> First text2 <div style="display:none;" class="more">Other text 2</div> <a class="showHide" href="#">Show more</a> </div> </div> 

Answer 2

Hej Linnéa!

IDs should be unique, and if you want multiple occurrences of something, you should use class names.

What I would do is to wrap the links inside of the container divs;

<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>
<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>

Then, instead of attaching your event listener to each anchor element, take advantage of event propagation , and add a listener to each content wrapper instead;

document.querySelectorAll('.content').forEach(function(contentDiv) {
    contentDiv.onclick = function(e) {
        if(e.target.classList.contains('toggle')) {
            e.target.innerHTML = e.currentTarget.classList.contains('open') ? 'Dölj' : 'Läs mer';
            e.currentTarget.classList.toggle('open');
        }
    }
});

Answer 3

Use document querySelectorAll

 var content = Array.from(document.querySelectorAll(".container")); content.forEach(function(el){ //var content= el.querySelector(".content"); var button = el.querySelector(".show-more"); button.addEventListener("click", function () { el.classList.toggle("open"); el.classList.contains("open") ? (button.innerHTML = "Dölj") : (button.innerHTML = "Läs mer"); }, false) }); 

 .container .content{display: none} .container.open .content{display: block} 

 <section> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> </section> 

Answer 4

You can make it work for multiple paragraphs if you use classes for all elements, and then process it from there as element pairs ( div + corresponding button ).

I deliberately kept everything as much as possible the same as your original code, so it would be easy to understand the changes. And I added some 'hidden' content so you really see something happening.

 var contentDivs = document.getElementsByClassName("content"); var buttons = document.getElementsByClassName("show-more"); for (var i = 0; i < contentDivs.length; i++) { // "let" creates locally scoped variables for use in the function. let div = contentDivs[i]; let button = buttons[i]; button.onclick = function() { if (div.className == "open") { //shrink the box div.className = "content"; button.innerHTML = "Read more"; } else { //expand the box div.className = "open"; button.innerHTML = "Close"; } }; } 

 div, a { font-size: 14px; } .content { overflow: hidden; max-height: 18px } 

 <div class="content"> Div 1<br />.....<br />.....<br />..... </div> <a class="show-more">Read more</a> <hr size="1"> <div class="content"> Div 2<br />.....<br />.....<br />..... </div> <a class="show-more">Read more</a> <hr size="1">