Styjun

I'm building a IT website and I'm using an accordion to display my clients services. One clicks on the accordion and it expands or contracts giving a description of that service. I want to add a read more / read less text that changes depending on whether or not the accordion is open or closed (which is done using the is-active class. I can't change the innerHTML of the

Read More

I've looked at many solutions and they don't seem to address the problem I'm facing because I need to access the child class of an element only IF that element has both the "accordion" and "is-active" classes. I've tried assigning the Read More tag with class = "readSwitch" id = "readSwitch" to a variable and changing that variables html e.g. z.innerHTML = "Read Less" but z is a copy of the y.getElementsByClass("readSwitch") not the actual element. How do I directly access the "readSwitch" class for elements that contain both "accordion is-active" classes?

JavaScript

 function readToggle() 
 var x = document.getElementById("accordions");
 var y = x.getElementsByClassName("accordion is-active");
 var i;
 for (i = 0; i < y.length; i++) 
 var z = y[i].getElementsByClassName("readSwitch");
 z.innerHTML = "Read Less";
 console.log(z.innerHTML);
 

 

HTML

<section class="accordions" id="accordions">
 <article class="accordion is-active">
 <div class="accordion-header toggle" onclick="readToggle()">
 <p>
 Custom Built Computers
 </p>
 <p style="font-size:10px" class="readSwitch" 
 id="readSwitch">
 Read More
 </p>
 </div>
 <div class="accordion-body">
 <div class="accordion-content">
 blah blah blah
 </div>
 </div>
 </article>
</section>

The problem is z is a copy of y so changing it doesn't update the DOM. However when I try to directly access y's inner HTML using something like y[i].getElementsByClassName("readSwitch").innerHTML = "Read Less"; I get an error "TypeError: y.getElementsByClassName is not a function. (In 'y.getElementsByClassName("readSwitch")', 'y.getElementsByClassName' is undefined)" . Are there any ways to directly modify y's child classes innerHTML using something like y.readSwitch.innerHTML = "Read Less"?

EDIT SOLVED!!! :
Thanks to jonathan Heindl i was able to figure it out. I've been struggling with this stupid thing for 3 days and couldn't find any solutions on the internet so I'm posting my Javascript solution for the read more read less toggle here for others. This solution works with the HTML above.

 document.onclick = function () 
 //variables for accordions with is-active
 var x = document.getElementById("accordions");
 var y = x.getElementsByClassName("accordion is-active");

 //variables for accordions with just accordion class, exclude those with "is-active"
 var noless = document.querySelectorAll('article.accordion:not(.is-active)');

 //Update all accordions with is-active to read less
 var i;
 for (i = 0; i < y.length; i++) 
 y[i].getElementsByClassName("readSwitch")[0].innerHTML = "Read Less &uarr;";
 

 //update accordions without is-active class to read more
 var w;
 for (w = 0; w < noless.length; w++) 
 noless[w].getElementsByClassName("readSwitch")[0].innerHTML = "Read More &darr;";
 
 

getElementsByClassName returns an array of elements
so when you want to reference the object itself you need to add the index afterwards:

y[i].getElementsByClassName("readSwitch")[0].innerHTML

PS: When editing the text of a node it is recommended to use .textContent = "Read LEss" otherwise you will overwrite all the childElements of said node

Bsp:

let x = document.getElementById("accordions");
let y = x.getElementsByClassName("accordion is-active");//maybe x.children depending on the structure
for (let i = 0; i < y.length; i++) 
 let z = y[i].getElementsByClassName("readSwitch")[0];
 z.textContent= "Read Less";
 console.log(z.textContent);