Penthe of Red Onion
1/25/2020 - 11:43 AM

RO Toggle Link

//RO toggle för läs mer på produktsidan
    $('.ro-togglelink').click(function(){
      //Hämtar attributet name på det som klickats ('this' 
      //är alltid hänvisning det som klickats)
      var current_name = $(this).attr("name");
      //current_name är satt till samma som id på den div man vill
      //göra fade på - lägger till # för att jquery ska hitta.
      //var showHideId = "#"+current_name;
      var showHideId = "."+current_name; //använder klasser istället för # eftersom jag behöver dela upp det som ska visas på två block

      //ändra meddelandet i länken som klickats:
      var readmore = $(this).attr("data-texstar-readmore") + ''; //$(this).html();//'Läs mer';
      var readless = $(this).attr("data-texstar-readless") + '';//'Läs mindre';
      
      //Kolla om diven är synlig eller inte.
      //Om synlig => fadeOut. Annars fadeIn.
      if($(showHideId).is(":visible")){
          $(showHideId).fadeOut();
        
          //byt till texten "Läs mer"
          //$(this).text(readmore);

          //använd istället insertAdjacentHTML för att kunna lägga till spans runt saker i länkarna man vill ändra
          this.innerHTML = '';
          this.insertAdjacentHTML('afterbegin', readmore);
          //console.log($(this).text());
      }
      else{
          $(showHideId).fadeIn();

          //byt till texten "Läs mindre"
          //$(this).text(readless);

        //använd istället insertAdjacentHTML för att kunna lägga till spans runt saker i länkarna man vill ändra
          this.innerHTML = '';
          this.insertAdjacentHTML('afterbegin', readless);
      } 
    });