Change text on hover using Css and jQuery

Question

I have a button on my website that when you click expand some text. And I need to make so when you hover mouse over that button, text changes to "Expand" and when text is expanded, and you hover over same button, text needs to be changed to "collapse". Here is my code: HTML:

  <button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
        <h1 class="jumbotron-heading" id="title">TEXT</h1> 
   </button>
         <p  class="lead text-muted" id="p1">TEXT</p>

Css:

 #p1{
   display:none; 
  }

jQuery:

var isUp=true;

        $('#btnSlideUp').click(function() {

            if(isUp){
                $('#p1').slideDown(1000);
                isUp=false;
            }else{
                $('#p1').slideUp(1000);
                isUp=true;
                }
            });

Thank you very much for any help given!

@CBroe yep, English is not my first language, thanks for pointing this out, i will edit it rn — DeadAnarch1st
– DeadAnarch1st, Commented Oct 15, 2017 at 17:38

Cahil Foley · Accepted Answer · 2017-10-15 18:23:06Z

3

Rather than using jQuery events you can handle this with CSS using classes and the hover selector.

Something like:

button.expanded::before {
    content: 'Expanded';
}

button.expanded:hover::before {
    content: 'Collapse';
}

button::before {
    content: 'Collapsed';
}

button:hover::before {
    content: 'Expand';
}

Then you can just apply your classes with jQuery and you the CSS takes care of it 😁

answered Oct 15, 2017 at 18:23

Cahil Foley

3002 silver badges3 bronze badges

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

Comments

Pevara · Accepted Answer · 2017-10-15 17:59:25Z

2

How about using .hover on $('#btnSlideUp')?

var isUp = true;

$('#btnSlideUp').hover(
  function() {
    if (isUp) {
      $(this).find('h1').text('Expand');
    } else {
      $(this).find('h1').text('Collapse');
    }
  },
  function() {
    $(this).find('h1').text('TEXT');
  }
)

$('#btnSlideUp').click(function() {
  if(isUp){
    $('#p1').slideDown(1000);
    isUp=false;
  }else{
    $('#p1').slideUp(1000);
    isUp=true;
  }
});

#p1{
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
  <h1 class="jumbotron-heading" id="title">TEXT</h1> 
 </button>
 <p  class="lead text-muted" id="p1">TEXT</p>

edited Oct 15, 2017 at 17:59

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

answered Oct 15, 2017 at 17:37

Stanley Cheung

9587 silver badges23 bronze badges

Comments

Michael Beeson · Accepted Answer · 2017-10-15 17:29:50Z

0

Well just as you used the .click event listener, you can use the .hover function

$('#btnSlideUp').hover(function() { /*do whatever you need here */ });

https://api.jquery.com/hover/

answered Oct 15, 2017 at 17:29

Michael Beeson

2,8632 gold badges20 silver badges26 bronze badges

Comments

Naren Murali · Accepted Answer · 2017-10-15 17:39:42Z

You can add an hover event to toggle this, I am using a flag to set the hover text for the button, if its c the button should say collapse else expand.

var isUp=true, button = $('title'), text = $('#p1'), mode;

        $('#btnSlideUp').click(function() {

            if(isUp){
                text.slideDown(1000);
                isUp=false;
                setTimeout(function(){mode = 'c'}, 1000);
            }else{
                text.slideUp(1000);
                isUp=true;
                setTimeout(function(){mode = 'e'}, 1000);
                }
            });
            $('#btnSlideUp').hover(function() {

            if(mode === 'c'){
                $(this).children().html('Collapse');
            }else{
                $(this).children().html('Expand');
                }
            }, function(){$(this).children().html('TEXT');});

#p1{
   display:none; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
        <h1 class="jumbotron-heading" id="title">TEXT</h1> 
   </button>
         <p  class="lead text-muted" id="p1">TEXT</p>

Collectives™ on Stack Overflow

Change text on hover using Css and jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related