Добавить увидеть больше / меньше меньше

Question

Я хочу добавить кнопку «больше / меньше» с настройкой: пользовательский значок - это значок «плюс» (+), как показано на рисунке ниже. Я смог сделать это с помощью следующего кода:

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>

Проблема в том, что когда я нажимаю кнопку, стиль кнопки исчезает, а значок и изображение ниже: Я бы хотел сохранить стиль кнопки, а также поменять иконку со значком минус (-).

Кто-нибудь может мне помочь в этой ситуации, пожалуйста?

Answer 1

Я думаю, что btnText.innerHTML, где обратное в функции. Кроме того, вы забыли поискать h4, вы заменяли все #myBtn.

Примечание. Лучше добавить css классов, чем изменить стиль.

Попробуйте

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>

Answer 2

Проблема, которую я вижу, в основном из-за большего количества div в вашем коде, поскольку все остальное помещено в него как дочерний элемент, поэтому, когда больше отображения не появляется, вы не видите применения стиля. Я думаю, что вам следует избегать изменения стилей более Div и затем посмотреть, что происходит