Utilizing Bootstrap and JavaScript features to showcase specific tab data

I am currently designing a universal search page. Users input a search query, and all relevant results are displayed. However, I also want to incorporate tabs that users can click on to filter the results further. Currently, the only tab that is functional is the "All" tab because it has the "active" class set. The "All" tab serves as a container for the other tabs. To illustrate, if we wanted to display results for "Events," I would structure the navigation tabs like this...

<div class="search-tab">
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#all">All</a></li>
    <li><a data-toggle="pill" href="#events_tab">Events</a></li>
    <li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
    <li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
    <li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
  </ul>
</div>

The data to be fetched is then enclosed within the respective div tabs, such as the events_tab shown below.

<div id="all" class="tab-pane fade in active">
  <div class="list-panel table-sort" id="events_tab">
    This section will showcase the events related to the search query...
  </div>
</div>

This project has exposed me to bootstrap, and any guidance or suggestions would be greatly appreciated. Thank you in advance!

javascriptcssbootstrap-4

Answer №1

It's a bit unclear if you're looking to have nested tabs for All or not. However, based on Bootstrap's tab HTML markup pattern, it is recommended to wrap your .tab-pane within a .tab-content container. Also, make sure to include jQuery and Bootstrap's JS bundle (after jQuery) so that the data- attributes can function properly.

Revised HTML for non-nested tabs and tab panes

<div class="search-tab">
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#all">All</a></li>
    <li><a data-toggle="pill" href="#events_tab">Events</a></li>
    <li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
    <li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
    <li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
  </ul>
</div>
<div class='tab-content'>
  <div id="all" class="tab-pane fade show active">
    all area
  </div> 
  <div id='events_tab' class='tab-pane fade'>
    events area
  </div>
</div>

To see the updated markup without nested tabs, check out this fiddle: https://jsfiddle.net/onuj90dz/

If you want to display search results along with other categories like events, appointments, calls, and vendors, consider placing the results in a different container outside of the tabs. You can view a basic example in this fiddle: https://jsfiddle.net/onuj90dz/1/

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

Is there a way to transfer textbox value to ng-repeat in AngularJS?

1) The Industry dropdown menu corresponds with a code textbox. Depending on the selected industry, the code will change accordingly. 2) There is a dynamic feature to add or delete Movie Names and Directors' names. In this table, there are three colu ...

javascriptangularjs

Bootstrap table with responsive design does not properly handle horizontal overflow

In my project, I attempted to customize a bootstrap table but encountered an issue when viewing the table on mobile devices. The 'table' always extends its width to fit 100% of the content within it. What I aim to achieve is for the table to have ...

htmlcssbootstrap-4css-tables

Issues encountered when attempting to send Jquery Ajax due to UTF-8 conflicts

I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...

javascriptphpjqueryajaxutf-8

Ways to recycle the output of the three.js fragment shader

Recently delving into GLSL shaders in three.js, I am currently experimenting with creating a simple and efficient blur effect on a mesh texture. Below is the fragment shader code I have been working on: void blurh(in vec4 inh, out vec4 outh, int r) { ...

javascriptthree.jsglslfragment-shader

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...

javascripthtmlcss

Learn the steps to create a vertically tiled background using a clipped image

My goal is to create a vertically tiled background by clipping the top 50px of a background image and using only that portion. However, the code I have below isn't working as expected. Even though I've given a higher z-index to the <div class= ...

cssbackground-imageclip

Flexbox styling using BootStrap's row class is a dynamic and versatile

Is there a way to create space between the four divs in the image below? https://i.sstatic.net/xHzbF.png As shown in the image, there are four divs aligned next to each other. The code for each individual div is: <div class="col-lg-3 col-md-4 co ...

htmlcssbootstrap-5

Changing Background Colors of Grid Items in React.js Grid Layout

I'm currently learning React and have created a basic app that shows data from a database in a grid format. I'm looking to customize the background colors of each grid item based on its priority level, which is pulled from the database. The prior ...

cssreactjsgridview

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

Here is a unique version: "Dealing with Node.js ES6 (ESM) Modules in TypeScript can be tricky, especially when the TypeScript Compiler (TSC) fails to emit the

I am facing an issue while transpiling my TypeScript project to JavaScript. I have set the project to resolve as an ES6 Module (ESM) by using the "module":"ES6" configuration, but the problem persists. This is the current setup in my ...

javascripttypescriptmoduleconfigurationes6-modules

Implement a validation function in JavaScript that compares two dates to ensure they are valid

In my search for the distinction between two dates, I have encountered a scenario where, upon a user's request to modify the arrival date, the system must retain the number of days between the arrival and departure dates before the alteration. Subsequ ...

javascriptjquerydatetimedatejs

Challenges with npm and Node.js compatibility in a Vite project

I've run into a problem while attempting to launch my Vite project using npm. After updating Node.js to version 18.16.0, I'm now receiving the following error message: The specified module could not be found. \?\C:\Users\Riaj& ...

javascriptreactjsnode.jsvite

Issues arise with AJAX post

I have run into an issue with my jQuery and Codeigniter setup while trying to update the database via AJAX. Despite having the following code in place, nothing seems to be happening or getting sent to my controller when the button is clicked... Snippet of ...

phpjavascriptjqueryajaxcodeigniter

JavaScript: specify parameters for function inputs

I'm curious about optimizing Javascript/Typescript functions arguments for clean code. To demonstrate, let's consider a basic example. Imagine I have a React component with a view property as props: <Grid view="Horizontal" /> ty ...

javascriptreactjstypescriptfunction

Discovering the function responsible for styling a DOM elementDiscovering how to identify the

I have a Prestashop 1.6 store and I've noticed that when I scroll down, my main menu becomes fixed at the top of the page. However, when I scroll back up, it reverts to its default position in the header. The issue is that the height of the menu is se ...

javascriptjquery

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

Combining specific columns in the user interface grid

I need to customize a UI grid by merging some middle columns to achieve the following layout: Name | Address | Comment | Job | College | Married ---------------------------------------------------------- Keshvi | India | New | Not applicable ...

javascriptangularjsui-grid

Change the status of embedded list

Recently, I made changes to my class structure: class Board { this.state = { lists : [{ id: 0, title: 'To Do', cards : [{id : 0}] }] } Now, I am facing an issue where I want to update ...

javascriptarraysreactjs

The angular matAutocomplete box is positioned beneath the bootstrap navbar element

Trying to integrate angular material matAutocomplete mat-options into a bootstrap Navbar, here's what the code looks like: <li class="nav-item"> <form class="example-form"> <mat-form-field class="example-full-width"> < ...

angularbootstrap-4angular-material

The minmax() function in a responsive grid layout does not function properly when incorporating grid areas

My Vision for the Layout I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size: Specifically, I wou ...

csslayoutresponsive-designcss-grid