CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DeadAnarch1st
DeadAnarch1st

Reputation: 99

Change text on hover using Css and jQuery

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!

Upvotes: 0

Views: 116

Answers (4)

Cahil Foley
Cahil Foley

Reputation: 300

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 😁

Upvotes: 3

Stanley Cheung
Stanley Cheung

Reputation: 958

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>

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 58394

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>

Upvotes: 0

Michael Beeson
Michael Beeson

Reputation: 2875

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/

Upvotes: 0

Related Questions