[Resolved] Javascript to hide/show div in View loop item targeting first result only

[Author]

Posts

[jonB-5]

I have a form placed within a View loop item that I have set to hide/show using Javascript. As per the attached screenshot, when a user clicks "Add a Booking", the booking form appears within the loop item.

The problem is, if a user clicks "add a booking" in the second loop item, the form appears in the first loop item, but not in the loop item where the booking button was clicked.

Can you advise on whether or not there is a solution to this, such that the item will show in the loop item where the button was clicked?

All code below is placed within the content template sections for the Loop Item.

 <div class="col-sm-3">
    <button class="button" onclick="myFunction()">Add a Booking</button>
    <!--<a href="[wpv-post-url]">Go To Ticket</a>-->
  </div>
  <div class="col-sm-12" id="myDIV" style="display: none;">
    <hr>
    <h5><b>Add a Booking</b></h5>
    [cred_form form='new-booking' form_name='New Booking']
  </div>

The Javascript is as follows...

 
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

[Noman]

Hi Jon,

Thank you for contacting Toolset support. We can’t use same ID(myDIV) multiple time on the same page, so that I’ve updated HTML and JS code.

1. Please replace the html code in the Content Template with this updated one:

<div class="frm-outer-container">
 <div class="col-sm-3">
   <button class="button btn-booking">Add a Booking</button>
   <!--<a href="[wpv-post-url]">Go To Ticket</a>-->
 </div>
 <div class="col-sm-12 frm-container" style="display: none;">
   <hr>
   <h5><b>Add a Booking</b></h5>
   [cred_form form='new-booking' form_name='New Booking']
 </div>
</div>

2. And use this updated JS code, remove the old one you have:

jQuery(document).ready(function($) {
	$('.btn-booking').on('click',function(){
		$(this).parents('.frm-outer-container').find('.frm-container').show('slow');
	});
});

I hope it will work fine then, if not please let me know and I will check further accordingly.
Thank you

[jonB-5]

This has worked, I just have one follow up issue...

Is it possible to add an option to hide the form after if is shown, or turn the 'Add a Booking' button to read 'Hide Form' and perform the hide when clicked?

[Noman]

Please use this updated JS code, remove the old one you have. This will dynamically change the Label of the button and same button will work for both functions (Add & Hide):

jQuery(document).ready(function($) {
	$('.btn-booking').on('click',function(){
		$(this).parents('.frm-outer-container').find('.frm-container').slideToggle('slow');
		if( $(this).text() == 'Add a Booking' )
			$(this).text('Hide Form');
		else 
			$(this).text('Add a Booking');
	});
});

I hope this helps in resolving the issue. Have a great weekend, Thank you

[jonB-5]

Sorted, many thanks!