Adjusting the page view when a collapse is opened

Question

Adjusting the page view when a collapse is opened

I am working on a website that features 3 images, each of which opens a collapse below with an embedded iframe website inside when clicked. I am trying to implement a function where the site automatically scrolls down to the opened iframe when an image is clicked. So far, I have only found solutions for accordions.

The iframes display a 3D tour, and I want to ensure that only one tour is visible at a time. To demonstrate this concept, I have created a basic demonstration using placeholder images and a single tour link: https://codepen.io/jvern22/pen/BGzgjw

Here is a snippet of my code depicting an image linking to an iframe; there are three instances of this structure:

<div class="col-md-4 port-item">
    <a href="" class="" data-toggle="collapse" data-target="#tour-duqesa">              
        <img src="assets/img/duqesa.jpg" alt="">
    </a>
    <h2 class="section-title-nomargin features-box">Duquesa</h2>
    <h5 class="options-text"><a href="assets/tours/duquesashorttour/index.html" class="" target="_blank">Open in new window</h5></a>              
</div>

Below is the code for the iframe element, replicated thrice to correspond with each image:

  <div id="tour-duqesa" class="collapse">
      <iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>
  </div>

I am still relatively new to coding, so I hope I have articulated my query effectively.

javascript html css bootstrap-4

Answer 1

Answer №1

Utilizing some JQuery code could assist in achieving your desired outcome.

To start, we can establish a listener for the click event on images that trigger a collapsible element to open. Subsequently, when one is clicked, it will close the currently visible collapsible element. This ensures only one collapsible element remains open at any given time. Here is an example of the code:

// Set up a click listener for images triggering collapsible elements.

$("a[data-toggle='collapse']").click(function()
{
    // Close all currently visible collapse elements.
    $(".collapse:visible").collapse('hide');
});

Furthermore, upon a collapsible element becoming fully visible to the user, it triggers the shown.bs.collapse event. By listening to this event, we can automatically scroll down to the visible collapsible element using the following code:

$(".collapse").on("shown.bs.collapse", function()
{
    var current = $(this);

    // Scroll down to the current opened collapse element.

    $([document.documentElement, document.body]).animate(
        {scrollTop: current.offset().top},
        1000
    );
});

Feel free to interact with a functional demonstration (view in fullscreen mode):

This code snippet can also be accessed on Codepen. I replaced the slim version of JQuery with the full version to ensure the animate() function works correctly. Click on the link below:

Codepen Example

Answer 2

Utilizing some JQuery code could assist in achieving your desired outcome.

To start, we can establish a listener for the click event on images that trigger a collapsible element to open. Subsequently, when one is clicked, it will close the currently visible collapsible element. This ensures only one collapsible element remains open at any given time. Here is an example of the code:

// Set up a click listener for images triggering collapsible elements.

$("a[data-toggle='collapse']").click(function()
{
    // Close all currently visible collapse elements.
    $(".collapse:visible").collapse('hide');
});

Furthermore, upon a collapsible element becoming fully visible to the user, it triggers the shown.bs.collapse event. By listening to this event, we can automatically scroll down to the visible collapsible element using the following code:

$(".collapse").on("shown.bs.collapse", function()
{
    var current = $(this);

    // Scroll down to the current opened collapse element.

    $([document.documentElement, document.body]).animate(
        {scrollTop: current.offset().top},
        1000
    );
});

Feel free to interact with a functional demonstration (view in fullscreen mode):

This code snippet can also be accessed on Codepen. I replaced the slim version of JQuery with the full version to ensure the animate() function works correctly. Click on the link below:

Codepen Example

Adjusting the page view when a collapse is opened

Answer №1

Similar questions

Update my function to be asynchronous by changing async: false to async: true using JQuery and Ajax

Secure an input field for exclusive attention. React

Approaching fashion from a new angle: incorporating perspective into

"Encountering issues with $http.get() function in my controller while trying to

Determine the time difference between two dates, taking into account Daylight Saving Time adjustments

Re-establishing Scroll Functionality Post Ajax Request Disruption caused by prettyLoader

Sending a URL through the $.post method to various websites

Determining the identity of an HTML element using its surrounding values

Using Nodes to Populate an Array with References to Objects

The CSS scrollbar is visible on the screen, but for some reason,

Enhance Data Filtering in Ag-Grid Using Vue.js

designing the border at the bottom of the existing menu selection

Duplicate key error in Node.js/Express with req.param

Execute JavaScript function with a delay once the webpage has finished loading

Can someone assist me with updating the image source for it to display correctly within the div element?

Detecting collisions in JavaScript

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Get a file from a distinct internal server than the one where the website is operating

Center align text in the uib-progressbar

When using VueJS checkboxes with object values bound to an array property, they do not get removed from the array when unchecked