JS- Show html based on wrapper class

Question

I'm using the following code to show more/show less on a page.

CSS

#more {display: none;}
.read-more-less{padding-bottom: 20px;text-align: center;display: block !important;margin:auto;width: 200px;height: 40px;font-size: 16px;margin-top: 15px;}

JS

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Show more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Show less"; 
    moreText.style.display = "inline";
  }
}

HTML

<div class="show-more">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p><span id="dots"></span><span id="more">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
</div>

This the jsfiddle

Now if the html block is placed within another div (like an include) where "class="change"

<div class="change">
    <div class="show-more">

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </p>
        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </p><span id="dots"></span><span id="more">
            <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            </p>
            <p>
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
    </div>
</div>

Is there a way of changing the child div class class="show-more" to class="show-none"

How could this be done?

Answer 1

You can use CSS to do this.

It is easiest if you always print the span tag and then only display it when necessary. Also, instead of using 'show-button', it would be easier to use 'hide-button':

<div class="hide-button"><!-- content is hidden -->
<span id="dots"></span><span id="more">
</div>

<div class=""><!-- content is displayed -->
<span id="dots"></span><span id="more">
</div>

<style>
.hide-button {
    display: none;
}
</style>

EDIT (in response to edited question):

There are a couple of ways to get the element that you want to change the class for. You can use either of the following lines of code:

// Get an element using its class name
var elem = document.getElementsByClassName('show-more')[0];

// OR

// Get an element using its CSS selector
var elem = document.querySelector('.show-more');

Once you have the element that you want to adjust the classes for, you can make the adjustments using code similar to the following:

// 'show-more' class is present
if (elem.classList.contains('show-more')) {
    elem.classList.remove('show-more');
    elem.classList.add('show-none');

// 'show-more' class is NOT present
} else {
    elem.classList.remove('show-none');
    elem.classList.add('show-more');
}