Btukfyl

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>

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>

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>

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">