Hiding, unhiding content on tab changes

Question

I have this code which can generate cute Tabs. JavaScript is responsible for switching tabs, but I'm having a hard time trying to hide/unhide content during tab switch.

What would be the best way to do it? Also if possible I would like to avoid using href. I've noticed in some other tabs implementation that when href is used, and tabs aren't at the top of the page (for example there are logos and some other stuff) when you click them it would make tabs at the top (as in logos would be hidden so you would need to scroll up to see them). Of course, it only happens if the content on the page is large enough.

Sorry for my language but I'm not CSS/JS/HTML guy so I'm fairly confident I'm mixing some stuff up.

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    @import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');

    body {
        font-family: 'Roboto', sans-serif;
    }

    .wrapper {
        text-align: center;
        margin: 50px auto;
    }

    .tabs {
        margin-top: 50px;
        font-size: 15px;
        padding: 0px;
        list-style: none;
        background: #fff;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
        display: inline-block;
        border-radius: 50px;
        position: relative;
    }

    .tabs a {
        text-decoration: none;
        color: #777;
        text-transform: uppercase;
        padding: 10px 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        transition-duration: 0.6s;
    }

    .tabs a.active {
        color: #fff;
    }

    .tabs a i {
        margin-right: 5px;
    }

    .tabs .selector {
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        border-radius: 50px;
        transition-duration: 0.6s;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        background: #05abe0;
        background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
    }


    .tabs-content {
        display: none;
    }

    .tabs-content.active {
        display: block;
    }
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
    <nav class="tabs">
        <div class="selector"></div>
        <a href="#" class="active"><i class="fas fa-burn"></i>Avengers</a>
        <a href="#"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
        <a href="#"><i class="fas fa-bolt"></i>Thor</a>
        <a href="#"><i class="fab fa-superpowers"></i>Black Panther</a>
    </nav>
</div>

<div class="tabs-content active" id="content1">
    <p>
        Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
        bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
        Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
        pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
</div>

<div class="tabs-content" id="content2">
    <p>
        Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken.
        Pork
        belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
        Pig
        swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham
        hock.
        Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop
        ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner
        rump
        frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
    </p>
    <p>
        Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket
        beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef
        kevin
        tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket
        shoulder.
        Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
</div>

<script type="text/javascript">
    var tabs = $('.tabs');
    var items = $('.tabs').find('a').length;
    var selector = $(".tabs").find(".selector");
    var activeItem = tabs.find('.active');
    var activeWidth = activeItem.innerWidth();
    $(".selector").css({
        "left": activeItem.position.left + "px",
        "width": activeWidth + "px"
    });

    $(".tabs").on("click", "a", function (e) {
        e.preventDefault();
        $('.tabs a').removeClass("active");
        $(this).addClass('active');
        var activeWidth = $(this).innerWidth();
        var itemPos = $(this).position();
        $(".selector").css({
            "left": itemPos.left + "px",
            "width": activeWidth + "px"
        });
    });
</script>

Answer 1

You could try something like the following using data-id on the links and then using it to show the relevant tab (I haven't test this so you might want to double check the syntax):

<div class="wrapper">
<nav class="tabs">
    <div class="selector"></div>
    <a href="javascript:void(0)" class="active" data-id="1"><i class="fas fa-burn"></i>Avengers</a>
    <a href="javascript:void(0)" data-id="2"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
    <a href="javascript:void(0)" data-id="3"><i class="fas fa-bolt"></i>Thor</a>
    <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
</nav>
</div>

<div class="tabs-content active" id="content1">
    <p>
        Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
        bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
        Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
        pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
</div>

<div class="tabs-content" id="content2">
    <p>
        Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken.
        Pork
        belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
        Pig
        swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham
        hock.
        Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop
        ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner
        rump
        frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
    </p>
    <p>
        Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket
        beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef
        kevin
        tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket
        shoulder.
        Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
</div>

<script type="text/javascript">
    var tabs = $('.tabs');
    var items = $('.tabs').find('a').length;
    var selector = $(".tabs").find(".selector");
    var activeItem = tabs.find('.active');
    var activeWidth = activeItem.innerWidth();
    $(".selector").css({
        "left": activeItem.position.left + "px",
        "width": activeWidth + "px"
    });

    $(".tabs").on("click", "a", function (e) {
        e.preventDefault();
        $('.tabs a').removeClass("active");
        $(this).addClass('active');
        var activeWidth = $(this).innerWidth();
        var itemPos = $(this).position();
        $(".selector").css({
            "left": itemPos.left + "px",
            "width": activeWidth + "px"
            });

// Hide all tabs
$('.tabs-content').hide();

// Get id of link clicked
        var id = $(this).data("id");

// Show current tab
$('#content' + id).show();
            });
        </script>

Alternatively you could try something like the following plugin which is quite nice because it is responsive and converts to an accordion on smaller screens (not sure if you need this to be mobile friendly): http://jellekralt.github.io/Responsive-Tabs/#tab-1