Changing text on a button with JavaScript toggle functionality: A step-by-step guide

Question

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you!

   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>

javascript jquery html css

Answer 1

Answer №1

Check out this neat JavaScript solution

To begin, let's define a custom class named .expanded that we can toggle on and off -

.highlight.expanded {
    height: auto;
}

Then, I updated the JavaScript code to toggle the .expanded class and change the button text accordingly -

function expandDescription(e) {

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

  // Update button text
  e.target.textContent == 'Open' ? e.target.textContent = 'Close' : e.target.textContent = 'Open'; 

}

// Listen for button clicks   
var btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', expandDescription)

Try it yourself in action on CodePen - http://codepen.io/ire/pen/wgyvYw

Answer 2

Check out this neat JavaScript solution

To begin, let's define a custom class named .expanded that we can toggle on and off -

.highlight.expanded {
    height: auto;
}

Then, I updated the JavaScript code to toggle the .expanded class and change the button text accordingly -

function expandDescription(e) {

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

  // Update button text
  e.target.textContent == 'Open' ? e.target.textContent = 'Close' : e.target.textContent = 'Open'; 

}

// Listen for button clicks   
var btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', expandDescription)

Try it yourself in action on CodePen - http://codepen.io/ire/pen/wgyvYw

Answer 3

Answer №2

Give this JavaScript code a try to dynamically adjust element height based on conditions:

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>

Answer 4

Give this JavaScript code a try to dynamically adjust element height based on conditions:

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>

Answer 5

Answer №3

It may seem impossible to get the height of an element using JavaScript, but with a button that changes the height, you can easily toggle between different heights by checking the button text.

function adjustHeight(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="adjustHeight(this);">Expand</button>
    </div>

Answer 6

It may seem impossible to get the height of an element using JavaScript, but with a button that changes the height, you can easily toggle between different heights by checking the button text.

function adjustHeight(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="adjustHeight(this);">Expand</button>
    </div>

Answer 7

Answer №4

If you've already identified the question using jQuery, toggling a class can help you achieve this task effortlessly.

Here is an example:https://jsfiddle.net/abc123/

<script>
   function expandDescription(){
      var element = document.querySelector(".backwhite");
      $(element).toggleClass("expandedHeight");
   }
</script>

CSS

.expandedHeight {
   height: 100%;
}

Answer 8

If you've already identified the question using jQuery, toggling a class can help you achieve this task effortlessly.

Here is an example:https://jsfiddle.net/abc123/

<script>
   function expandDescription(){
      var element = document.querySelector(".backwhite");
      $(element).toggleClass("expandedHeight");
   }
</script>

CSS

.expandedHeight {
   height: 100%;
}

Answer 9

Answer №5

$(".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>

implement the use of .toggleClass()
ensure there is a specific class for overflow.
toggle the content accordingly

Answer 10

$(".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>

implement the use of .toggleClass()
ensure there is a specific class for overflow.
toggle the content accordingly

Answer 11

Answer №6

Hey everyone, take a look at this!

<!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. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
 <p>1. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
 <p>1. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
</div>

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

</body>
</html>

Answer 12

Hey everyone, take a look at this!

<!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. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
 <p>1. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
 <p>1. Design User Interface For Email Campaign.</p>
 <p>2. Implement Functionality of Email Campaign</p>
 <p>3. Develop Keyword Display using Drag And Drop Feature.</p>
</div>

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

</body>
</html>

Answer 13

Answer №7

Give this code a shot! When you click the button, it will toggle the overflow property and change the button text. Best of luck!

<html>

  <head>
  </head>

  <body>
    <script>
      function adjustHeight() {
        var element = document.querySelector(".backwhite");
        element.style.height = "auto";
        if (element.style.overflow == "hidden")
          element.style.overflow = "visible";
        else
          element.style.overflow = "hidden";
        var button = document.getElementsByTagName("button")[0];
        if (button.innerHTML === "Expand")
          button.innerHTML = "Collapse";
        else
          button.innerHTML = "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="adjustHeight();">Expand</button>
  </div>
</body>

</html>

function adjustHeight() {
  var element = document.querySelector(".backwhite");
  element.style.height = "auto";
  if (element.style.overflow == "hidden")
    element.style.overflow = "visible";
  else
    element.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="adjustHeight();">Expand</button>
</div>

Answer 14

Give this code a shot! When you click the button, it will toggle the overflow property and change the button text. Best of luck!

<html>

  <head>
  </head>

  <body>
    <script>
      function adjustHeight() {
        var element = document.querySelector(".backwhite");
        element.style.height = "auto";
        if (element.style.overflow == "hidden")
          element.style.overflow = "visible";
        else
          element.style.overflow = "hidden";
        var button = document.getElementsByTagName("button")[0];
        if (button.innerHTML === "Expand")
          button.innerHTML = "Collapse";
        else
          button.innerHTML = "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="adjustHeight();">Expand</button>
  </div>
</body>

</html>

function adjustHeight() {
  var element = document.querySelector(".backwhite");
  element.style.height = "auto";
  if (element.style.overflow == "hidden")
    element.style.overflow = "visible";
  else
    element.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="adjustHeight();">Expand</button>
</div>

Answer 15

Answer №8

Make use of the jQuery toggle method Example:

<!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>Here is a sample text.</p>

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

</body>
</html>

Answer 16

Make use of the jQuery toggle method Example:

<!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>Here is a sample text.</p>

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

</body>
</html>

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Ways to remove a JSON item based on its index position?

Guide on Creating HTML Embeds for Multiple Selection Code Blocks

Efficiently loading components in Angular using browserify with lazy loading

Is the object in handlebars referring to the context?

Display or conceal div based on chosen options

show data pulled from localStorage

Are there distinctions between using app.use("/", express.static) versus app.use(express.static)?

Getting the input tag id of an HTML form can be achieved by using the "id

AngularJS Expandable Table - Unlocking Limitless Possibilities

Turn off the scrollbar without losing the ability to scroll

Remove inline CSS from HTML elements

The screen reader seems to be malfunctioning as soon as I include this particular code

The console correctly detects the value, but is unable to set the innerHTML property of null

Unable to establish a connection with the endpoint

executing several asynchronous requests upon loading the webpage in a single-page application

Issue with html2canvas image download in Firefox

Adding a collection of icons to an accordion using Jquery

Building a table in Quasar by utilizing nested objects

The best practices for utilizing getStaticProps with Firebase

Moving a popup div along with a marker in Leaflet can be achieved by using the set