CODEWITHSUNDEEP
javascriptjqueryhtmlcss
etherpunk
etherpunk

Reputation: 43

Scroll to anchor when expanding details/summary?

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?

Upvotes: 2

Views: 1939

Answers (1)

Pedram
Pedram

Reputation: 16575

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>

Upvotes: 2

Related Questions