Change icon and text of button on button click - Jquery

Dave123
February 7, 2023
224 views
0 votes
2 Answers

I currently have a button with a span that displays an icon with an arrow, like so:

<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
   <span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span> 
   Collapse Views 
</button>

I would want onClick function to instead now say Expand Views, and have the glyphicon-collapse icon to be up rather than down

Here’s what I have come up with:

function hey() {
  var btn  = $("#btnCollapse");
  var span = btn.children("#iconCollapse");
  span.addClass("glyphicon glyphicon-collapse-up");
  btn.html = "Expand Views"
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
    <span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span> 
    Collapse Views 
  </button>

What I am actually trying to achieve is this:

If user clicks on Collapse View – I want to perform some functionality, something along the lines of

if (btn.html.contains('Collapase'))
    Then
           //do something
    Else 
           //do something else

Tags: html jquery

Answers

First: ID should be unique .. That means if you will use multiple collapse/expand elements you need to change the id to class

Second: if you change the HTML you’ll remove the icon so it will be better to wrap the text inside <span>Collapse</span> or change all the html like the example below

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>
<body>
  <button type="button" onClick="hey()" class="btnCollapse btn btn-default btn-sm">
    <span class="iconCollapse glyphicon glyphicon-collapse-down"></span> 
    Collapse Views 
  </button>
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

<script>
    function hey(){
      var btn = $(".btnCollapse");
      var span = btn.children(".iconCollapse");
      btn.html(
        btn.text().trim().indexOf("Collapse") > -1 ?
        '<span class="iconCollapse glyphicon glyphicon-collapse-up"></span> Expand Views' 
        : 
        '<span class="iconCollapse glyphicon glyphicon-collapse-down"></span> Collapse Views');
    }
</script>

For me this isn’t the good way to do that .. But you can use this code temporarily untill you get a best code of it

And the good way to do this is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>
<body>
  <button type="button" onClick="hey(this)" class="btnCollapse btn btn-default btn-sm">
    <span class="iconCollapse glyphicon glyphicon-collapse-down"></span> 
    <span class="textCollapse">Collapse Views</span> 
  </button>
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

<script>
    function hey(el){
      var btn = $(el);
      var span = btn.find(".iconCollapse");
      var text = btn.find(".textCollapse");
      span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
      text.text(span.hasClass("glyphicon-collapse-up") ? "Expand Views" : "Collapse Views");
    }
</script>

JS ES6/css3 make it easier:

const
  btn     = document.querySelector('#btnCollapse')
, btnIcon = document.querySelector('#btnCollapse > span.glyphicon')
  ;
btnCollapse.onclick = () => 
  {
  btnIcon.className = (btn.classList.toggle('viewExpend'))
                    ? 'glyphicon glyphicon-collapse-up' 
                    : 'glyphicon glyphicon-collapse-down'
                    ;
  }

#btnCollapse
  {
  font-size : 3rem;
  }
#btnCollapse::after 
  {
  content : 'Collapse Views'
  }
#btnCollapse.viewExpend::after
  {
  content : 'Expand Views'
  }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-collapse-down"></span> 
</button>

also :

const btn = document.querySelector('#btnCollapse')
  ;
btnCollapse.onclick =()=>
  {
  console.log( btn.classList.toggle('viewExpend') );
  }

#btnCollapse
  {
  font-size : 3rem;
  width     : 10em;
  }
#btnCollapse > span.glyphicon
  {
  float : left;
  }
#btnCollapse.viewExpend       > span:first-of-type,
#btnCollapse:not(.viewExpend) > span:last-of-type
  {
  display: none;
  }
#btnCollapse::after
  {
  content: 'Collapse Views'
  }
#btnCollapse.viewExpend::after
  {
  content: 'Expand Views'
  }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-collapse-down"></span> 
  <span class="glyphicon glyphicon-collapse-up"></span> 
</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Change icon and text of button on button click – Jquery

Answers