Building tabs using JQuery

Question

I am trying to build tabs using jQuery, but until i click on any tab it displays the content of all the tabs. I want to display only the content of only active tab

I have used this code. It works good after you click on a tab, the problem is that when refreshed, I am able to see content of both the tabs.

jQuery

(function($) {

  var tabs = $(".tabs li a");

  tabs.click(function() {
    var content = this.hash.replace('/', '');
    tabs.removeClass("active");
    $(this).addClass("active");
    $("#content").find('p').hide();
    $(content).fadeIn(200);
  });

})(jQuery);

.wrap {
  margin: 0;
  position: relative;
  top: -10px;
}

ul.tabs {
  width: 390px;
  height: 80px;
  margin-left: 0.5px;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  overflow: hidden;
  padding: 0;
}

ul.tabs li {
  float: left;
  width: 130px;
}

ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #6edeef;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}

.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}

.tabs li:nth-child(2) a {
  z-index: 2;
}

ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}

ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #545f60;
  color: #6edeef;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}

.group:before,
.group:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.group:after {
  clear: both;
}

#content {
  width: 100%;
  height: 150px;
  margin: 0;
  background: #545f60;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #fff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}

#one {}

#two {}

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

<div class="wrap">
  <ul class="tabs group">
    <li> <a class="active" href="#/one"> Tab1 </a></li>
    <li> <a href="#/two"> Tab2 </a></li>
  </ul>
  <div id="content">
    <p id="one">lorem tab1</p>
    <p id="two">lorem tab2</p>
  </div>
</div>

Thanks for editing the code. Now you can see that when unclicked, the content of both the tabs 'paragraphs' are visible. But after clicked, it works fine @CarstenLøvboAndersen — gyanendra
– gyanendra, Commented Sep 12, 2019 at 7:30

Pushprajsinh Chudasama · Accepted Answer · 2019-09-12 07:46:48Z

You can try this.it's working.

JQUERY:

    $(document).ready(function () {
      $('#two').hide();
    (function($) {
      var tabs = $(".tabs li a");

      tabs.click(function() {
        $('#two').show();
        var content = this.hash.replace('/', '');
        tabs.removeClass("active");
        $(this).addClass("active");
        $("#content").find('p').hide();
        $(content).fadeIn(200);
      })
    })(jQuery);
    });

    .wrap {
      margin: 0;
      position: relative;
      top: -10px;
    }

    ul.tabs {
      width: 390px;
      height: 80px;
      margin-left: 0.5px;
      margin-top: 0;
      margin-bottom: 0;
      list-style: none;
      overflow: hidden;
      padding: 0;
    }

    ul.tabs li {
      float: left;
      width: 130px;
    }

    ul.tabs li a {
      position: relative;
      display: block;
      height: 30px;
      margin-top: 40px;
      padding: 10px 0 0 0;
      font-family: 'Open Sans', sans-serif;
      font-size: 18px;
      text-align: center;
      text-decoration: none;
      color: #ffffff;
      background: #6edeef;
      -webkit-box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
      box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
      border: 0px solid #000000;
      -webkit-transition: padding 0.2s ease, margin 0.2s ease;
      -moz-transition: padding 0.2s ease, margin 0.2s ease;
      -o-transition: padding 0.2s ease, margin 0.2s ease;
      -ms-transition: padding 0.2s ease, margin 0.2s ease;
      transition: padding 0.2s ease, margin 0.2s ease;
    }

    .tabs li:first-child a {
      z-index: 3;
      -webkit-border-top-left-radius: 8px;
      -moz-border-radius-topleft: 8px;
      border-top-left-radius: 8px;
    }

    .tabs li:nth-child(2) a {
      z-index: 2;
    }

    ul.tabs li a:hover {
      margin: 35px 0 0 0;
      padding: 10px 0 5px 0;
    }

    ul.tabs li a.active {
      margin: 30px 0 0 0;
      padding: 10px 0 10px 0;
      background: #545f60;
      color: #6edeef;
      /*color: #ff6831;*/
      z-index: 4;
      outline: none;
    }

    .group:before,
    .group:after {
      content: " ";
      /* 1 */
      display: table;
      /* 2 */
    }

    .group:after {
      clear: both;
    }

    #content {
      width: 100%;
      height: 150px;
      margin: 0;
      background: #545f60;
      -webkit-box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
      box-shadow: 2px 8px 25px -2px rgba(0, 0, 0, 0.3);
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      -moz-border-radius-bottomright: 8px;
      -moz-border-radius-bottomleft: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    p {
      font-family: 'Open Sans', sans-serif;
      padding: 30px 40px;
      color: #fff;
      line-height: 26px;
      font-size: 18px;
      margin: 0;
    }

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="wrap">
          <ul class="tabs group">
            <li> <a class="active" href="#/one"> Tab1 </a></li>
            <li> <a href="#/two"> Tab2 </a></li>
          </ul>
          <div id="content">
            <p id="one">lorem tab1</p>
            <p id="two">lorem tab2</p>
          </div>
        </div>

Collectives™ on Stack Overflow

Building tabs using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related