Creating tabbed interfaces with JQuery

How do I build tabs using jQuery without displaying the content of all tabs until clicked?

I have tried using this code, and it works well once a tab is clicked. However, when the page is refreshed, the content of both tabs is visible.

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>

jqueryhtmlcss

Answer №1

Feel free to give this a try, it should work like a charm.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

javascripthtmllocaljsfiddle

Troubleshooting: Why Your Long Polling Example Isn't Working in Just 5 Minutes

Can anyone spot any errors in this code? Check out the example here I attempted to replicate the example, but it's not functioning correctly. I am looking to create real-time notifications from a database. If anyone can provide tutorials or assistan ...

phpjquerymysqlajax

Images in CSS accordion not displaying correctly in WordPress website

It seems like I am overlooking a simple solution here, but it's escaping me. I'm attempting to make a CSS accordion function where each section links to a page. If you want to view the source refer to this link Here is my test site URL: this l ...

htmlcsswordpressimageaccordion

Continuous Div Carousel with Looping in jQuery

I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an ove ...

javascriptjqueryhtmlcss

Retrieve form input from a servlet using a name attribute such as "input[]"

Looking to retrieve input values from a form on my JSP page where each input shares the same name. Take a look at this JSFiddle Any suggestions on how I can access these inputs from my servlet? I attempted using String[] description = request.getParamete ...

javascriptjqueryjspservlets

Trouble with image size transition not functioning properly

When attempting to enlarge an image with a transition in Chrome, it doesn't seem to be working properly. Here is the HTML code: <img src="foobar.png"> And the CSS code: img { float: left; margin-right ...

csscss-transitions

Unable to submit form within a while loop in PHP table

After making some changes to my form, I noticed that only the hidden input field is being submitted when I try to submit the form. It's strange because it was working perfectly fine before. while ($row = mysqli_fetch_array($gettimesheets)) { $dat ...

phphtml

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

phpcss

Develop an engaging billboard carousel using jQuery

After coming across a tutorial on tympanus, I decided to make some modifications to create a rotating billboard effect. However, something seems to be going wrong and it's driving me crazy trying to figure out the problem! $(function() { $('#ad_ ...

javascriptjquerycsscallbackslideshow

I am having trouble accessing the database. Jacky @ localhost Password: NO

https://i.sstatic.net/7Kvfu.png What is preventing me from accessing the database? Username: jacky @ local host Password: NO ...

pythonhtmlsqlflaskphpmyadmin

The input field does not accept any values even after setting it to be editable

Hey there! I have a specific requirement where I need to edit certain fields by clicking on an edit link. Initially, these fields will be disabled and in a readonly state. Once I click on the edit link, the field should become blank and editable. The issu ...

javascripthtmlspring-mvc

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Is it possible to return a variable and its value using jQuery AJAX?

I'm currently using jQuery.ajax() to submit a form. Now I have a PHP script that will check if a specific input field is empty. Here's an example: $is_error = $user->is_error; if($is_error !=0) { echo $is_error; } When it comes back ...

phpjqueryajaxvariables

Positioning searchbar on the right side in bootstrap 5

How can I fix the search bar on the right side of the screen within the Bootstrap navbar, without compromising its flexibility? I want it to always stay at the rightmost side regardless of the number of links in my navigation bar. As a beginner in CSS and ...

htmlcss

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

javascriptjqueryhtmlcss

Import information from a website into MATLAB, including embedded internal frames (iframes)

Recently, I've been using MATLAB's urlread function to fetch website content for further analysis. However, I encountered a specific site where the data I'm looking for is housed within an internal frame embedded in the main index.php file ...

phphtmlmatlabiframe

Javascript continues to conceal my web background without my permission

After loading my webpage, I click on a link and the expected javascript runs as planned. However, once it completes and presents the results, the page goes blank to a white screen displaying only the outcomes. My goal is to have these results showcased o ...

javascripthtmlcss

The functionality is not operating correctly on Internet Explorer

This code is functioning properly in Mozilla and Opera, but it is not working in IE. Any assistance on this issue would be greatly appreciated. The JavaScript is working fine, however, in IE 10 only the back panel is displayed. Thank you for your help. h ...

javascripthtmlcssweb

Retrieve the parent id using jQuery, not the children elements

Looking for a way to add a jQuery click event to the parent element with class .menu-option and retrieve its id, "#main-link-1", without changing the HTML structure: <div id="main-link-1" class="menu-option"> <div id="icon" class="menu-icon"> ...

jquery

What is the best way to send data using ajax?

I'm looking to send variables from post.php to addcomment.php using an AJAX request. I've attempted the code below, but it's not functioning as expected. The page reloads, but no changes occur, and there's no data being added to the dat ...

phpjqueryajax