Seeking advice on jQuery and Javascript:
Take a look at this HTML snippet:
<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 represents the Booking Widget in my Index.html
Below is the CSS for the "quandoo-widget" div and the "reservation button" with appropriate classes:
.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;
}
The challenge at hand involves using jQuery to toggle the visibility of the booking Widget. The code snippet below accomplishes this:
$('.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() {
// Toggle Widget Visibility
$('.quandoo-widget').fadeToggle(800, 'swing');
// Change Button Text from Reservation to Zurück (Back)
var textToggle = $('.home-menu-link-reservation').text('Zurück');
});
The current behavior changes the button text to "Zurück" when clicked. However, the requirement now is to revert it back to "Reservation" when toggling off the Widget.
Your insights on achieving this dual functionality would be greatly appreciated!
Thank you in advance!