JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<h3 style="background-color: rgb(38, 59, 132); font-size: 24px; font-weight: normal; color: rgb(255, 255, 255); margin: 10px 0px; padding: 5px 15px; line-height: 150%;"><a name="Submission_Types"></a>2. Paper Submission Types</h3> 
<div id="paper-types">
     <h4 style="background-color: rgb(236, 236, 236); font-size: 14px; color: rgb(51, 51, 51); padding: 10px 15px; font-weight: bold; margin-bottom: 10px;"><img width="17" align="absMiddle" height="17" style="padding: 2px;" src="/sites/bam.ac.uk/files/down02-75x75.png" alt="" />&nbsp;Full Papers</h4> 
    <div>
        <p style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; padding: 5px 15px; margin: 7px 0px; line-height: 150%;"><strong>Word Count<br />             </strong>

        </p>
        <p style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; padding: 5px 15px; margin: 7px 0px; line-height: 150%;">Length of full paper submission: 5000-7000 words (excluding tables and references)
            <br />You will be asked to submit the word count for your paper when completing the submission form online.</p>
        <p style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; padding: 5px 15px; margin: 7px 0px; line-height: 150%;"><strong>General Paper Format Requirements</strong>

        </p>
        <p style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; padding: 5px 15px; margin: 7px 0px; line-height: 150%;">General format requirements for submissions can be found at:</p>
        <ul>
            <li><a href="#Paper_Format_Requirements">General Paper Format Requirements</a>

            </li>
        </ul>
        <p style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: normal; padding:...

JavaScript

$(function () {
    $("#paper-types").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        activate: function (event, ui) {
            var scrollTop = $(".accordion").scrollTop();
            if(!ui.newHeader.length) return;
            var top = $(ui.newHeader).offset().top;
            $("html,body").animate({
                scrollTop: scrollTop + top - 5
            }, "fast");
        }
   
   });
});