jQuery: How to toggle a button's text back and forth?

Viewed 314

A question regarding jQuery / Javascript:

Please check out the following HTML code first:

<div class="quandoo-widget" id="quandoo-booking-widget"></div>
<script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"></script>
<button class="home-menu-link-reservation">RESERVATION</button>

This is the HTML code for a Booking Widget on my Index.html

Here is the CSS for the same div with the class "quandoo-widget" as well as the "reservation button" with the class "home-menu-link-reservation":

.quandoo-widget {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
z-index: 300;
}

.home-menu-link-reservation {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 77%;
z-index: 500;
margin-top: 20px;
padding: 5px 26px;
border-style: solid;
border-width: 1.5px;
border-color: hsla(0, 0%, 100%, .8);
background-color: rgba(8, 24, 21, .4);
font-family: Miller, sans-serif;
color: #fff;
font-size: 15px;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
}

Now my question: I want to use jQuery to toggle the booking Widget on and off, which I actually managed to achieve with the jQuery code below:

$('.social-icons').hide();
$('.social-icons').fadeIn(6000);
$('.home-menu-link-reservation').hide();
$('.home-menu-link-reservation').fadeIn(3000);
$('.quandoo-widget').hide();
// Function Button Click
$('.home-menu-link-reservation').on('click', function() {
    // Fade Widget In and Out on Click
    $('.quandoo-widget').fadeToggle( 800, 'swing' );
    // Change Button Text from Reservation to Zurück
    var textToggle = $('.home-menu-link-reservation').text('Zurück');
});

Now if you test the code you will see that the Widget DOES toggle and on the first click the "reservation" text on the button changes to "Zurück".

Where I am stuck is: I need the text of the reservation button to change back to "Reservation" while we toggle the button as well.

So when the Widget pops up it's "Zurück" which stands for "back" and when the widget is not showing the text should say "Reservation" again.

Can you kindly help me?

Thank you !!

1 Answers

You always set the text to 'Zurück' you must test if the text is equal to 'RESERVATION' then you set it to 'Zurück' :

$('.social-icons').hide();
$('.social-icons').fadeIn(6000);
$('.home-menu-link-reservation').hide();
$('.home-menu-link-reservation').fadeIn(3000);
$('.quandoo-widget').hide();
// Function Button Click
$('.home-menu-link-reservation').on('click', function() {
    // Fade Widget In and Out on Click
    $('.quandoo-widget').fadeToggle( 800, 'swing' );
    // Change Button Text from Reservation to Zurück
    var textToggle = $('.home-menu-link-reservation').text() == "Zurück" ? 'RESERVATION' : 'Zurück';

    $('.home-menu-link-reservation').text(textToggle)
});

https://jsfiddle.net/xq37r6fv/1/

Related