CODEWITHSUNDEEP
javascriptbutton
Alexandre Deplancke
Alexandre Deplancke

Reputation: 157

Add see more/see less button customized

I want to add a see more/see less button with customization: the custom is a plus (+) icon as the image below. See more button I was able to doing this with the following code:

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 = "See more here"; 
	moreText.style.display = "none";
} else {
	dots.style.display = "none";
	btnText.innerHTML = "See less"; 
	moreText.style.display = "inline";
}
}
/*read more button*/
#more {
display: none;
}

.fa-plus-circle {
font-size: 40px;
float: left;
margin: 5px;
vertical-align: super;
color: #a41a3c;
}

.fa-plus-circle:before {
content: "\f055";
}

#myBtn {
background-color: #fff;
border: none;
width: 13%;
}

#myBtn h4 {
font-size: 13px;
margin: 17px 0 0 0;
}
<span id="dots"></span>
<div id="more" style="margin-bottom:20px;" class="col-xs-12">
<!-- here are the hidden <div> -->
<div class="row" style="text-align: center;">
	<button onclick="myFunction()" id="myBtn">
		<i class="fa fa-plus-circle"></i>
		<h4>See more here</h4>
	</button>
</div>
</div>

The problem is when I click the button, the style of the button disappear and the icon as well as below image: See less button I would like to keep the style of the button and also change the icon with a minus (-) icon.

Can anybody help me on this situation please?

Upvotes: 1

Views: 579

Answers (2)

Dominique Fortin
Dominique Fortin

Reputation: 2238

I think the btnText.innerHTML where reversed in the function. Also, you forgot to look for the h4, you were replacing everything of #myBtn.

Note: It's better to add css classes than to change style.

Try

function myFunction() {

 var dots = document.getElementById("dots");
 var btnText = document.querySelector("#myBtn h4"); 

 if (dots.classList.contains("hidden")) {

   dots.classList.remove("hidden");
   btnText.innerHTML = "See less"; 
 } else {
   dots.classList.add("hidden");
   btnText.innerHTML = "See more here"; 
 }
}
/*read more button*/

.hidden {
   display: none;
}

.centering {
   text-align: center;
}

.bottom_spacer {
   margin-bottom:20px;
}

.fa-plus-circle {
   font-size: 40px;
   float: left;
   margin: 5px;
   vertical-align: super;
   color: #a41a3c;
}

.fa-plus-circle:before {
   content: "\f055";
}

#myBtn {
   background-color: #fff;
   border: none;
   width: 13%;
}

#myBtn h4 {
   font-size: 13px;
   margin: 17px 0 0 0;
   white-space: nowrap
}
<span id="dots" class="hidden">(+) something  (+) somethingelse</span>
<div id="more" class="col-xs-12 bottom_spacer">
 <div class="row centering">
  <button onclick="myFunction()" id="myBtn">
   <i class="fa fa-plus-circle"></i>
   <h4>See more here</h4>
  </button>
 </div>
</div>

Upvotes: 1

JayD
JayD

Reputation: 986

The problem i see is basically because of the more div in your code as everything else is placed in it as a child so when more display gets none you don't see the style getting applied.I think you should avoid changing styles of the more div and then see whats happening

Upvotes: 1

Related Questions