onclick event to create a 'show more' style content box which expands and shrinks as you click the button

user_7270651 0
Viewed 40

I am not sure why this is not working. Could it be the way I wrote my id name and class name? I wrote that way for demo purposes.

I checked the spelling and so far, so good. Your help will be very much appreciated. I have read somewhere that it is always recommended to use:

content.classList.add("open")

instead of:

content.className = "open"

as the latter one may eliminate all other classes that exist in the content element.

Here is my code:

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");

buttonVar.onclick = function() {
  if (contentVar.className == "classOfopen") {
    // shrink the box
    contentVar.className = "";
    buttonVar.innerHTML = "Show More";
  } else {
    // expand the box
    contentVar.className = "classOfopen";
    buttonVar.innerHTML = "Show Less";

  }
}
body {
  background: #eee;
}

#idOfcontent {
  width: 400px;
  background: #ffff;
  padding: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 100px;
  overflow: hidden;
  /* Set transitions up */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfcontent .classOfopen {
  max-height: 5000px;
  /* Set transitions up */
  /* for smooth transition */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfshowmore {
  background: #1594e5;
  color: #ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: block;
  width: 140px;
  font-size: 17pxx;
  text-transform: uppercase;
  padding: 10px;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
<div id="idOfcontent">
  <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>

  <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>

  <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
    than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>

buttonclick javascript
3 Answers

your css selector is wrong.

#idOfcontent .classOfopen

Selects a descendent of #idOfcontent with the class classOfopen. what you want is:

#idOfcontent.classOfopen

Which is an element with both id idOfcontent and class classOfopen.

On another note, it is better to use classList rather then directly editing className. This will become clear once you try and manipulate more then one class at a time.

user_195618570

Here is your fixed code snippet,

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");

buttonVar.onclick = function() {
  if (contentVar.className == "classOfopen") {
    // shrink the box
    contentVar.className = "";
    buttonVar.innerHTML = "Show More";
  } else {
    // expand the box
    contentVar.classList.add('classOfopen');  /* classList.add() is the correct way of adding classes */
    buttonVar.innerHTML = "Show Less";

  }
}
body {
  background: #eee;
}

#idOfcontent {
  width: 400px;
  background: #ffff;
  padding: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 100px;
  overflow: hidden;
  /* Set transitions up */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfcontent.classOfopen { /* <- removed the space */
  max-height: 1000px;
  /* Set transitions up */
  /* for smooth transition */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfshowmore {
  background: #1594e5;
  color: #ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: block;
  width: 140px;
  font-size: 17pxx;
  text-transform: uppercase;
  padding: 10px;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
<div id="idOfcontent">
  <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>

  <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>

  <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
    than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>

But using max-height is not recommended for accordion boxes, or collapsables where easing or animation is usded, you can read this blog to help you tackle the delay before the accordion gets closed

user_84242690

There is a space in your selector:

#idOfcontent .classOfopen should be #idOfcontent.classOfopen. The version with the space selects a (grand-) child with class classOfOpen, while the second one refers to element by ID idOfcontent with class classOfOpen.

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");

buttonVar.onclick = function() {
  if (contentVar.className == "classOfopen") {
    // shrink the box
    contentVar.className = "";
    buttonVar.innerHTML = "Show More";
  } else {
    // expand the box
    contentVar.className = "classOfopen";
    buttonVar.innerHTML = "Show Less";

  }
}
body {
  background: #eee;
}

#idOfcontent {
  width: 400px;
  background: #ffff;
  padding: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  color: #444;
  margin: 0 auto;
  max-height: 100px;
  overflow: hidden;
  /* Set transitions up */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfcontent.classOfopen {
  max-height: 5000px;
  /* Set transitions up */
  /* for smooth transition */
  -webkit-transition: max-height 0.7s;
  -moz-transition: max-height 0.7s;
  transition: max-height 0.7s;
}

#idOfshowmore {
  background: #1594e5;
  color: #ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: block;
  width: 140px;
  font-size: 17pxx;
  text-transform: uppercase;
  padding: 10px;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
<div id="idOfcontent">
  <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>

  <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>

  <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
    than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>

user_163056070
Related