Shifting page focus when opening a collapse

Question

I have a website with 3 images, on click the image opens a collapse below with an iframe website inside. I want the site to scroll down to the opened iframe when the image is clicked. I can only find an answer for accordions.

The frames open a 3d tour, which should stop when another is opened. I've made a basic codepen, it uses dummy images and only links to one tour atm. https://codepen.io/jvern22/pen/BGzgjw

My code. Image with link to Iframe, there are three of these;


                  
        
    
    Duquesa
    Open in new window

The code for the iframe, again, there are three of these;

I'm new to this so I hope that I have asked in the correct way.

user_10366495 · Answer

Maybe some code on Jquery can help to approach what you need.

First, we can register a listener on the click event for the images that open a collapsible element, and then when some of they are clicked, close the current one that is visible to the user. This will help to only have one collapsible element open at a time. A code for this would be the next:

// Register a click listener on the images that opens a collapsible element.

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

Second, when a collapsible element is fully visible to the user, it triggers the next event: shown.bs.collapse. So we can put a listener on that event, and scroll down to the current visible collapsible with the next 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
    );
});

Here you have a working example you can play with it (check on fullscreen mode):

$(document).ready(function()
{
    // Register a click listener on the images that opens a collapsible element.

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

    // Register a listener for when a collapse element is made
    // visible to the user (wait for animations transitions).

    $(".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
        );
    });
});

box-sizing: border-box;

.display-iframe {
  border: none;
}

.options-text {
  font-size: 14px;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
}









  
    
      Have a look at what can be done        
    

    
                    
        
      
      Duquesa                           
    

    
      
        
      
      Aldea Hills              
    

    
      
        
      
      Aldea Hills 2

Also, I push the code on codepen too, but had to replace the slim version of JQuery for the full version, otherwise the animate() won't be defined, here you have the link:

Codepen Example

Shifting page focus when opening a collapse

1 Answers