Shifting page focus when opening a collapse

up vote
3
down vote

favorite

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;

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

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

  <div id="tour-duqesa" class="collapse">

      <iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>

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

asked Nov 10 at 13:25

jvern22

183

New contributor

add a comment |

up vote
3
down vote

favorite

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;

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

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

  <div id="tour-duqesa" class="collapse">

      <iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>

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

asked Nov 10 at 13:25

jvern22

183

New contributor

add a comment |

up vote
3
down vote

favorite

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;

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

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

  <div id="tour-duqesa" class="collapse">

      <iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>

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

asked Nov 10 at 13:25

jvern22

183

New contributor

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;

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

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

  <div id="tour-duqesa" class="collapse">

      <iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>

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

javascript html css3 bootstrap-4

asked Nov 10 at 13:25

jvern22

183

New contributor

asked Nov 10 at 13:25

jvern22

183

New contributor

asked Nov 10 at 13:25

jvern22

183

New contributor

asked Nov 10 at 13:25

jvern22

183

asked Nov 10 at 13:25

jvern22

183

New contributor

jvern22 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

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;

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

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

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

jvern22 is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239396%2fshifting-page-focus-when-opening-a-collapse%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

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

// 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');

});

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

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

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

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

add a comment |

up vote
1
down vote

accepted

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

// 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');

});

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

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

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

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

add a comment |

up vote
1
down vote

accepted

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

// 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');

});

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

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

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

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

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

// 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');

});

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

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

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

$(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;

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

$(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;

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<section id="tour-gallery">

<div class="container">



  <div class="row">

    <div class="col-sm-12 section-description wow fadeIn">

      <h2 class="section-title">Have a look at what can be done</h2>        

    </div>



    <div class="col-md-4 port-item">

      <a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">              

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Duquesa</h2>                           

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills</h2>              

    </div>



    <div class="col-md-4 port-item">

      <a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">

        <img src="https://dummyimage.com/350x186/000/fff" alt="">

      </a>

      <h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>

    </div>

  </div>



  <div id="tour-duqesa" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills1" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



  <div id="tour-aldeahills2" class="collapse">

    <iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>

  </div>



</div>

</section>

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

edited Nov 10 at 23:15

answered Nov 10 at 15:46

D. Smania

2,4301321

answered Nov 10 at 15:46

D. Smania

2,4301321

answered Nov 10 at 15:46

D. Smania

2,4301321

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

add a comment |

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

I had to search as I was getting the same error that caused you to update the codepen. Slim doesn't have animate. Thanks for the detailed answer, I learnt a lot.
– jvern22
Nov 10 at 23:40

add a comment |

jvern22 is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

jvern22 is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky