Scroll to anchor when expanding details/summary?

Question

I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:

/* JS */

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 400, 'swing', function () {
            window.location.hash = target;
        });
    });
});

/* HTML */

<div id="anchor></div>

<a href="#anchor">Scroll to anchor</a>

However, wrapping the summary or details itself in the a tag will disable this scrolling effect.

/* HTML */

<div id="anchor">
    <details><a href="#anchor"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?

So you mean want to scroll to anchor also with expand in a same time? — Pedram, Jan 15 '18 at 06:19
Right, exactly. I want to expand the details and immediately scroll to the associated div id anchor which contains the details/summary I'm clicking on. Seems this should be possible, but I don't get it! — etherpunk, Jan 15 '18 at 06:33
Interesting, Pedram. Yes, your solution is very close to what I'm trying to do. However, the anchor link is now separated from the details and summary div. Is there no way for these to be one and the same? Edit: Also, unfortunately, this opens all details. I'd like to isolate each div from the other. — etherpunk, Jan 15 '18 at 06:52
What do you mean of *separated* ? and *to be one and the same* ,not clear to me. Please explain more what you trying to do exactly? — Pedram, Jan 15 '18 at 06:55
I have a long list of divs. basically, each with a unique id. When I click one of these divs, I want to open that specific div's details to reveal the embedded video. The scrolling effect is simply to center the video. I'm not sure if that helps to clarify. Let me know if you have any ideas! — etherpunk, Jan 15 '18 at 07:03
Little confused, see my updated answer, There are many div with unique id and if you click to anchor link it going to scroll to it and open details, so this is what you want in your question. what else? you want wrap anchor tag around `anchor` div? Maybe you need update your question with some code to show me what you want. — Pedram, Jan 15 '18 at 07:12

Pedram · Answer 1 · 2018-01-15T07:09:22.533

Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.

$('details').attr('open', true);

If you want to close it use:

$('details').attr('open', false);

In your code better use this selector:

$(target + ' details').attr('open', true);

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var target = this.hash,
      $target = $(target);
      $(target + ' details').attr('open', true);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 400, 'swing', function() {
      window.location.hash = target;
    });

  });
});

#divide {
height: 500px;
}

body {
  padding-bottom: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#anchor1">Scroll to anchor</a>
<br>
<a href="#anchor2">Scroll to anchor</a>
<br>
<a href="#anchor3">Scroll to anchor</a>
<br>
<a href="#anchor4">Scroll to anchor</a>

<div id="divide"></div>

<div id="anchor1">
    <details><a href="#anchor1"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor2">
    <details><a href="#anchor2"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor3">
    <details><a href="#anchor3"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor4">
    <details><a href="#anchor4"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

Scroll to anchor when expanding details/summary?

1 Answers1

Linked