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 !!