Conceal the elements of Widget Style by using jQuery to target the ul

My task involves creating a widget style using HTML's ul tag.

<div class='tabs' style='width:50%'>
<ul>
  <li id="basic-li"><a href='#basic_information'>Basic</a></li>
  <li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
  <li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
  <li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>

In total, I have 4 divs to work with.

<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>

The objective is to display the div corresponding to the href of the currently clicked li. Only HTML / CSS and jQuery are to be utilized for this functionality.

javascriptjqueryhtmlcsswidget

Answer №1

In essence, this is the basic concept. Feel free to customize it according to your requirements. The approach here involves assigning the target li's id as a data attribute within the div that will be clicked. Upon clicking the div, the associated li's id is retrieved and displayed while hiding all other li elements.

$(document).ready(function(){

$('.tab').click(function(){

$('.tabs li').hide();
var idTab = $(this).data('id');

$('#' + idTab).show();

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='tabs' style='width:50%'>
<ul>
  <li id="basic-li"><a href='#basic_information'>Basic</a>
  </li><li  id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
  </li><li  id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
  </li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>


<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>

Cheers...!!

Answer №2

To implement this feature in your HTML, make the following adjustments and include the jQuery script provided below:

<ul>      
  <!-- Add data-target attribute to each "a", with a value that corresponds to the tab -->    
  <li>
    <a data-target="basic_information" href='#basic_information'>Basic</a>
  </li>
  <li>
    <a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
  </li>
  <li>
    <a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
  </li>
  <li>
    <a data-target="confirm" href='#confirm'>Confirmation</a>
  </li>
</ul>

<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>

<script>
$(function() {

  // Hide all tabs initially
  $('.tab').hide()

  // Attach click event listener to elements with data target attribute
  $('[data-target]').click(function() {

    // Hide all tabs
    $('.tab').hide()

    // Get the target id from the clicked menu link
    var tabToShow = $(this).data('target')

    // Show the corresponding tab
    $('#' + tabToShow).show()

    // Prevent default link navigation behavior
    return false
  })

})
</script>

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

What is the process for incorporating a custom button for selecting the date and closing the calendar in bootstrap-datepicker?

I successfully coded a simple project, but I'm struggling to figure out how to add a custom button to the bootstrap-datepicker. <!DOCTYPE html> <html> <head> <title>JS</title> <link rel="stylesheet" href="http ...

jquerybootstrap-datepicker

Capturing errors during function declaration in JavaScript

A problem has arisen in the below function definition due to a script error function foo () { try { var bar = function() { ERROR } } catch (exception) { console.debug("exception"); } } foo(); However, th ...

javascriptfirefox

What's the reason for the malfunction of  ?

How can I add space between firstname and lastname using   in my code? Despite setting the character set to utf-8, the space is not being rendered correctly. I even tried using tab space, but it didn't work as expected. export class AppCompone ...

htmlangulartypescriptecmascript-6

Displaying the specified item within an array using AngularJS

My application features a group of 'players' each with their own unique attributes that I want to showcase within a modal window and cycle through. The user interface is structured like this: <!-- Score Round Modal --> <div class="mo ...

javascriptangularjs

Tooltips in Bootstrap are not functional when used on pages other than the initial one in datatables

I have multiple data tables in development where the cells of certain columns contain Bootstrap tooltips. To achieve this, I am utilizing: The Bootstrap framework Datatables My issue arises when using Datatables with multiple pages. Upon document readin ...

javascriptjquerytwitter-bootstrapdatatablestooltip

Anticipate the middleware function to either invoke the next function or return a HTTP 400 status code

I am eager to delve into unit testing and am looking to test my Node API. I am utilizing Express with Typescript and Jest for testing. Prior to invoking the controller middleware, I apply the route input validation middleware to verify the validity of the ...

javascriptnode.jstypescriptexpressjestjs

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

Binding arguments to child functions within Vue components

When working with React, it's a common practice to bind parameters for child components in the following manner: <Child onChange={e => doThing(complex.variable.inParentScope[3], e.target.value)} foo="bar" /> In Vue, I want to ach ...

javascriptvue.js

Tips for designing an interactive walkthrough for a website with JavaScript

Some websites, such as Facebook games, incorporate step-by-step tutorials for new users using JavaScript to display pop-ups guiding the user on where to click next and explaining what is happening. How can one develop a similar system? What type of archit ...

javascript

Whenever I click on <a href="whatever.aspx"></a>, I would like the page to be displayed within the current page

This is the code I am working with: <asp:DataList ID="dlGallery" runat="server" RepeatLayout="Flow" Width="100%" CellPadding="4" ForeColor="#333333"> <AlternatingItemStyle BackColor="White" ForeColor="#284775" /> <FooterStyle BackColor ...

javascriptjqueryhtmlasp.netdatabase

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

knockout.js' $root leads to a page displaying nothing

Using the $root binding context is resulting in a blank page for me. Removing it allows the page to load properly. Causing blank page: <td><input data-bind="value: name" /></td> <td><select data-bind="options: $root.availableMe ...

javascripthtmlknockout.js

Automatically update the selection in an md-select dropdown

I am dealing with the following HTML structure <md-select id="testSelect" ng-model="objElements" ng-change="onElementChange()" name="objElements" placeholder="Select Stuff"> <md-option id="testOption" ng-r ...

htmlangularjsangular-material

Looking for visible elements in WebDriverIO?

Currently, I am developing a test suite using WebDriverIO for a website with multiple duplicate elements that are selectively displayed based on user interaction... For example, the site may contain five buttons that each open a tooltip. These tooltips ar ...

javascriptnode.jsseleniumecmascript-6webdriver-io

Ways to continuously refresh the display in AngularJS

There are 2 div elements below, and I need to display only one of them depending on whether the doStuff() function is triggered in the controller when a specific anchor element is clicked. <div ng-controller='myController'> <div ng- ...

javascriptangularjsangularjs-ng-clickng-show

Apply a box-shadow to the lower part of the div starting from the center

After much searching, I finally found a preview of what I had in mind. Unfortunately, I couldn't find the right words to describe it. Here is the link to the image for reference: https://i.sstatic.net/t2q27.png Thank you in advance for your help. ...

cssborderbox-shadow

The error message displays "window.addEventListener is not a function", indicating that

Recently, I've been dealing with this code snippet: $(document).ready(function(){ $(window).load(function() { window.addEventListener("hashchange", function() { scrollBy(0, -50);}); var shiftWindow = function() { scrollBy(0, - ...

javascriptjquery

Trouble with displaying autocomplete options for ajax requests

I recently implemented the autocomplete feature using bootstrap typeahead in my project. The original code snippet worked flawlessly: $(function () { var $input = $(".typeahead"); $input.typeahead({ source: [ {id: "someId1", name: "Display nam ...

jqueryajaxtwitter-bootstraptypeahead.jsbootstrap-typeahead

Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see: https://i.stack.imgur.com/KbyGP.png However, this is the code I have: https://i.stack.imgur.com/4wEf0.png References: How to Remove WebKit's Banana-Yellow Autofill Background Remove forced ye ...

javascripthtmlcsssafari

The entire Sphere Geometry in three.js is not completely encompassed by the texture

Click here to view the image I'm trying to create a rotating moon. Everything works perfectly with MeshStandardMaterial (with color but no texture), however, when I apply a texture to the sphere geometry, it behaves strangely. The issue I'm facin ...

javascriptthree.js