JSFiddle - React, Tailwind, and code Playground

by volpeo

HTML

<div class="js-tabs">
        <ul class="tab-nav">
            <li class="selected"><a href="#contact">Fiche contact</a></li>
            <li><a href="#timeline">Historique</a></li>
            <li><a href="#appointments">Rendez-vous</a></li>
            <li><a href="#bills">Facturation</a></li>
        </ul>
        <div id="contact" class="tab-content">
            <p>Email : [email protected]</p>
            <p>Phone number : 033 607 313 346</p>
        </div>
        <div id="timeline" class="tab-content">
            <dl>
               <dt>Consultation : 22/09/2013</dt>
               <dd>Tendonitis on right arm.</dd>

               <dt>Additionnal examination : march 1992</dt>
               <dd>X-ray of his leg showing the fracture.</dd>

               <dt>History : march 1992</dt>
               <dd>Broke a leg.</dd>
           </dl> 
        </div>
        <div id="appointments" class="tab-content">
            <b>Future : </b>
            <p>14/02/2014</p>
            <b>Past : </b>
            <p>25/09/2013</p>
            <p>04/11/2012</p>
            <p>22/04/2012</p>
        </div>
        <div id="bills" class="tab-content">
            <p>45 € - 10/10/2013</p>
            <p>26,50 € - 08/10/2013</p>
        </div>
    </div>

JavaScript

(function ($) {
    $.fn.hashtabify = function () {
        $(this).each(function () {
            var $tab = $(this);
            $tab.find('> div').hide();
            $($tab.find('> ul .selected a').attr('href')).fadeIn(300);

            $tab.find('> ul a').click(function () {
                var $a = $(this);
                $tab.find('.tab-content').hide();
                $($a.attr('href')).fadeIn(300);
                $a.parent().addClass('selected').siblings().removeClass('selected');
                return false;
            });

            // find all <a> with href start with a '#' in tab-content
            $tab.find('.tab-content a[href^="#"]').click(function (e) {
                debugger;
                $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click');
                return false;
            });
        });
    }
}(jQuery));

$('.js-tabs').hashtabify();