JSFiddle - React, Tailwind, and code Playground

accordion scrollto wip

by ian_smithz

HTML

<div>
    <span class="AccLink">Accordion 1</span><br />
    <span class="AccLink">Accordion 2</span><br />
    <span class="AccLink">Accordion 3</span><br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
</div>
<div id="Accordion">
    <h3>Accordion 1</h3>
    <div>
        <span  id="acc0">Test</span>
        CONTENT
    </div>
    <h3>Accordion 2</h3>
    <div>
        <span  id="acc1">Test</span>
        CONTENT
    </div>
    <h3>Accordion 3</h3>
    <div>
        <span  id="acc2">Test</span>
        CONTENT
    </div>
</div>
<div>
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make page Taller.<br />
    This Content make...

CSS

.AccLink {
    color: red;
    cursor: pointer;
}

.AccLink:hover {
    text-decoration: underline;
}

JavaScript

$( "#Accordion" ).accordion({
    collapsible: true,
    active: false
});

// This goes through the span tags with the class AccLink and assigns the function Navigate(some number)
// The number corresponds to a span tag with id 'acc[the number]' wrapping the first word of the accordion.
//The order on the page of the links corresponds to the order of accordions, keep that in mind.
$('.AccLink').each( function (i) {
  $(this).click(function () {
    Navigate(i);
  });
});

//This is the function that activates and accordion and scrolls to it.
function Navigate(dest) {
    $( "#Accordion" ).accordion({
        active: dest
    });
    $(window).scrollTop(($("#acc" + dest).offset().top - 60));
}