Ways to design a vertical tab using CSS and JavaScript

I am currently working on creating a Vertical tab element using CSS and jQuery. However, I am facing an issue where I need to display the content of the first tab upon page load. I have tried using the following line of code but it does not seem to be working:

$('#v-nav>div.tab-content:first-child').show();

I obtained the Vertical tab code from the link provided below, please take a look:

http://jsfiddle.net/frabiacca/7pM7h/5/

Could you please assist me in correcting this code so that the first tab-content is displayed by default upon loading the page?

Thank you in advance.

javascriptjqueryhtmlcsstabs

Answer №1

Implemented a default active class for the div element and added styling with display:block; for the .active class.

$(function() {
    var items = $('#v-nav>ul>li').each(function() {
        $(this).click(function() {
            //remove previous class and add it to clicked tab
            items.removeClass('current');
            $(this).addClass('current');

            //hide all content divs and show current one
            $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');

            window.location.hash = $(this).attr('tab');
        });
    });

    if (location.hash) {...}

    function showTab(tab) {...}

    $(window).hashchange(function() {...})

    $(window).hashchange();
});
body {
    background-color: #f7f7f7;
}
.wrapper {
    width: 960px;
    margin: 0px auto;
    padding-top: 20px;
    min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li {....}
#wrapper h1 {....}
...
#v-nav >div.tab-content.active {
  display: block;
}
#v-nav >div.tab-content >h4 {...}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<section id="wrapper" class="wrapper">...

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

Retrieving data from MongoDB for rendering on an HTML page

I have successfully inserted data into my MongoDB database, but I am facing issues with the "get" function to display this data on my HTML page. My current setup involves using Node.js with Express framework and Angular for front-end development and routi ...

javascriptangularjsnode.jsmongodbexpress

how to execute a javascript function in an ionic controller from the template

My journey in creating my first Ionic app has been smooth so far. I am not well-versed in UI design, so I may not be implementing the best practices, but I am making progress nonetheless... Within a template, I have encountered the following code snippet ...

javascriptangularjsionic-framework

If the integer holds a particular value, take one action; if not, take a different course of action

My goal is to categorize my users from 1 to 7 and display a specific message based on their rank. If the logged-in user has Rank 7, they should see a message saying "you are staff". However, I've encountered an issue where assigning Rank 7 to multiple ...

phphtmlmysqldatabaselocalhost

What is the best way to delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

htmljquerywordpress

Smooth scrolling feature for Wordpress websites

I am currently in the process of converting an HTML5 template into a Wordpress theme. One specific feature I'd like to add is a custom scroll for Wordpress using the code: <script src="jquery.nicescroll.js"></script> DEPENDENCIES This cod ...

javascriptphpjqueryhtmlwordpress

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui

AngularJs fails to render CSS styles

I'm encountering a small issue with my angularJS code. I am attempting to showcase JSON data that includes both CSS and HTML code. However, on my website, all that is displayed is a hard-coded form of HTML and CSS (resembling the code below). I have t ...

javascripthtmlcssangularjs

Submitting a form with missing required information because the placeholder attribute is being used

I'm encountering an issue with my form where required fields can be submitted without any input. I want to use placeholder text, but it seems to be treated as a value, causing the form to submit successfully. I am utilizing the HTML5 'placeholde ...

htmlforms

The THREE.Raycaster is detecting intersections with the mesh's initial position following the position.set() method

When using Three.js, I encountered an issue where the THREE.Raycaster does not recognize an object's new position set using position.set(). If the object is left at the default position of 0,0,0, the mesh is properly intersected. function initialize( ...

javascriptthree.jsraycasting

Setting the selected value of a COREUI multiselect widget

I received the following JSON response from an API. {"first_name":"Person 1","last_name":"Person 1","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081d0a0b17163 ...

htmljqueryjsoncore-ui

Understanding the sequence of operations in Javascript using setTimeout()

If I have the following code: function testA { setTimeout('testB()', 1000); doLong(); } function testB { doSomething(); } function doLong() { //takes a few seconds to do something } When I run testA(), what happens after 1000 mill ...

javascriptexecutionmultiple-browsers

Continuously unveil a circle in a repetitive sequence

I'm currently working on a project that involves a scanline effect, and I have a Codepen snippet displaying my progress (Codepen link). However, I want to take it a step further by gradually changing the color after the scanline has passed, similar to ...

javascriptgraphicsthree.jswebgl

I am curious as to why the Bootstrap 4 dropright selected menu appears as a default browser button in Chrome, while it functions seamlessly in Firefox

An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Using CSS background-image URL in .NET MVC tutorials

What is the correct way to route to an image in an MVC web application? MVC has default routes, meaning you can access the same page in multiple ways: 1. localhost 2. localhost/home/index However, you can also do it this way, changing the root directory. ...

cssasp.net-mvcurl

How can I break down an object with hyphenated key names?

Attempting to perform object destructuring on the following: { name: "Bryan", last-name: "Enid" } However, trying to destructure it like this is not successful: const {name, last-name} = req.body Is there an alternative method to destructure this ...

javascriptjson

Aptana HTML Editor displays a blank page

Currently, I have Aptana set up as a plugin within Eclipse Neon. To create my HTML file, I used the template found at "New From Template => HTML => HTML 4.0.1 Strict Template (*.html)". The issue I am facing is that when I click on the file in the P ...

htmleditoraptana

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

javascripthtmlarraysjavascript-objects

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

cssangularjs

"Malfunction in jQuery event listener causing disruption in the initial stages of the function

My function was working perfectly fine until I added an event listener that prompts another function. The goal is to load text into specific divs, followed by an animation function upon completion. However, the animation seems to be causing the text loadin ...

jqueryevent-listener

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

I'm currently working on incorporating a new menu option into the "Actions" menu within a custom transaction form in NetSuite. While I can successfully see my selection in the Actions Menu on the form, I'm running into an issue with triggering th ...

javascriptoraclenetsuite