How to toggle button in JavaScript with text change?

Question

I want to hide and show overflow content in a div.If i click on expand bautton it expand. But i want this button should be toggle and text also be change. Thnks

   function descriptionHeightMore(){
          var myElement = document.querySelector(".backwhite");
        myElement.style.height = "auto";
        }

 .backwhite{
        background-color: aqua;
        padding:15px;
        height:50px;
        overflow:hidden;
      }

   <div class="container">
     <div class="backwhite">
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    </div>
    <button type="button" class="btn btn-default btn-block"     onclick="descriptionHeightMore();">Expand</button>
    </div>

Ire Aderinokun · Accepted Answer · 2017-01-31 07:56:09Z

1

Here's a solution with plain JavaScript

First, you should create a new class called .expanded which we can toggle on and off -

.backwhite.expanded {
    height: auto;
}

Next, I modified the JavaScript to toggle the .expanded class, as well as the content of the button -

function toggleDescriptionHeight(e) {

  // Toggle .expanded class
  document.querySelector(".backwhite").classList.toggle('expanded');

  // Toggle textContent of the button
  e.target.textContent == 'Expand' ? e.target.textContent = 'Collapse' : e.target.textContent = 'Expand'; 

}

// Add event listener to button click   
var button = document.querySelector('.btn');
button.addEventListener('click', toggleDescriptionHeight)

Link to a working example on CodePen - http://codepen.io/ire/pen/wgyvYw

answered Jan 31, 2017 at 7:56

Ire Aderinokun

1452 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ajay Kumar Over a year ago

Hello Ire Aderinokun, Your code is working well if i run it in codepen but if i run it in normal html page then it is not collapse or expand. Can you check it.and thnks a lot for help me.

Ire Aderinokun Over a year ago

Hi @AjayKumar , can you send me a link to the page? I've done it locally and it works

Ajay Kumar Over a year ago

Thanks Dear for your support, i did some mistake while writing code, now your code run very well.Again Thanks a lot !!

Ire Aderinokun Over a year ago

Awesome! Glad to help :)

Suchit kumar · Accepted Answer · 2017-01-31 07:55:36Z

with javascript Try this, first check the height and then decide:

    function descriptionHeightMore(){
    	 var myElement = document.querySelector(".backwhite");
        if(myElement.style.height == "auto"){
         myElement.style.height = "50px";
        }else{
            myElement.style.height = "auto";
        }
    }

  .backwhite{
    background-color: aqua;
    padding:15px;
    height:50px;
    overflow:hidden;
  }

<div class="container">
 <div class="backwhite">
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block"  onclick="descriptionHeightMore();">Toggle</button>
</div>

Jack jdeoel · Accepted Answer · 2017-01-31 08:33:06Z

To get element's height by javascript is impossible .You have button for changing height so checking on its button text is easy to make toggle changing .

function descriptionHeightMore(t){
          var myElement = document.querySelector(".backwhite");       
          if(t.innerHTML == "Expand") {
            myElement.style.height = "auto";
            t.innerHTML = "Collapse";
            }
          else {
            myElement.style.height = "50px";
            t.innerHTML = "Expand";
            }
        }

.backwhite{
        background-color: aqua;
        padding:15px;
        height:50px;
        overflow:hidden;
      }

<div class="container">
     <div class="backwhite">
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
     <p>1. Create Ui For Email Campaign.</p>
     <p>2. Create Functionality of Email Campaign</p>
     <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    </div>
    <button type="button" class="btn btn-default btn-block"     onclick="descriptionHeightMore(this);">Expand</button>
    </div>

Kiran Shinde · Accepted Answer · 2017-01-31 07:49:20Z

0

Since you have labelled question in jQuery, You can achieve this easily with toggleClass function of jQuery

Working Example https://jsfiddle.net/yyx93shy/

<script>
   function descriptionHeightMore(){
      var myElement = document.querySelector(".backwhite");
      $(myElement).toggleClass("autoHeight");
   }
</script>

CSS

.autoHeight {
   height: auto;
}

answered Jan 31, 2017 at 7:49

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Comments

guradio · Accepted Answer · 2017-01-31 07:52:46Z

$(".btn").click(function() {

  $(".backwhite").toggleClass("overflow")
  $(".backwhite").hasClass("overflow") ? $(".btn").text("Expand") : $(".btn").text("Compress")

})

.backwhite {
  background-color: aqua;
  padding: 15px;
  height: 50px;
}
.overflow {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="backwhite overflow">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  </div>
  <button type="button" class="btn btn-default btn-block">Expand</button>
</div>

use .toggleClass()
have a predefined class for overflow.
toggle accordingly

lifeisbeautiful · Accepted Answer · 2017-01-31 08:47:49Z

0

Check it out guys

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

   .backwhite{
    background-color: aqua;
    padding:15px;
    height:50px;
    overflow:hidden;
  } 

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1  /jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
     var myElement = document.querySelector(".backwhite");

     if(myElement.style.height == "auto"){
     myElement.style.height = "50px";
    }else{
        myElement.style.height = "auto";
    }
    });
});

</script>
</head>
<body>

 <div class="backwhite">
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 <p>1. Create Ui For Email Campaign.</p>
 <p>2. Create Functionality of Email Campaign</p>
 <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>

<button type="button">Toggle</button>

</body>
</html>

answered Jan 31, 2017 at 8:47

lifeisbeautiful

8461 gold badge9 silver badges19 bronze badges

2 Comments

Ajay Kumar Over a year ago

Thnks Aravind Bhat K Can you help me to change text with toggle.

lifeisbeautiful Over a year ago

change text in the sense,you no longer need hide and show in that?

Penguin9 · Accepted Answer · 2017-02-07 09:20:42Z

Try this code. It will change the overflow and the button value on a click of a button. good luck

<html>

  <head>
  </head>

  <body>
    <script>
      function descriptionHeightMore() {
        var myElement = document.querySelector(".backwhite");
        myElement.style.height = "auto";
        if (myElement.style.overflow == "hidden")
          myElement.style.overflow = "visible";
        else
          myElement.style.overflow = "hidden";
        var myButton = document.getElementsByTagName("button");
        if (myButton.value == "expand")
          myButton.value = "collapse";
        else
          myButton.value = "expand";
      }
    </script>

    <style>
      .backwhite {
        background-color: aqua;
        padding: 15px;
        height: 50px;
        overflow: hidden;
      }
    </style>

    <div class="container">
    <div class="backwhite">
      <p>1. Create Ui For Email Campaign.</p>
      <p>2. Create Functionality of Email Campaign</p>
      <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
      <p>1. Create Ui For Email Campaign.</p>
      <p>2. Create Functionality of Email Campaign</p>
      <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    </div>
    <button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore();">Expand</button>
  </div>
</body>

</html>

function descriptionHeightMore() {
  var myElement = document.querySelector(".backwhite");
  myElement.style.height = "auto";
  if (myElement.style.overflow == "hidden")
    myElement.style.overflow = "visible";
  else
    myElement.style.overflow = "hidden";
  var myButton = document.getElementsByTagName("button");
  if (myButton.value == "expand")
    myButton.value = "collapse";
  else
    myButton.value = "expand";
}

.backwhite {
  background-color: aqua;
  padding: 15px;
  height: 50px;
  overflow: hidden;
}

<div class="container">
  <div class="backwhite">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  </div>
  <button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore();">Expand</button>
</div>

lifeisbeautiful · Accepted Answer · 2017-01-31 07:51:43Z

-1

Use jquery method to toggle Ex:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button>Toggle between hide() and show()</button>

</body>
</html>

answered Jan 31, 2017 at 7:51

lifeisbeautiful

8461 gold badge9 silver badges19 bronze badges

4 Comments

kritikaTalwar Over a year ago

copy paste from W3school

lifeisbeautiful Over a year ago

doesn't matter..i hope you also use w3schools.@kritikaTalwar

Suchit kumar Over a year ago

convert your answer to the OP requirement to show your point.

lifeisbeautiful Over a year ago

posted check it out@Suchit

Collectives™ on Stack Overflow

How to toggle button in JavaScript with text change?

8 Answers 8

4 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related