Guide to creating a tab dropdown in Bootstrap version 2

Can someone guide me on how to make my Bootstrap tab dropdown? Here is the code snippet I am currently using in MVC.

HTML

<div id="tabs" style="border: 0px; width:100%;"> 
    <ul id="uTabs">     
        <li><a href="#tabs-1"><strong>Teacher</strong></a></li> 
        <li><a href="#tabs-2"><strong>Student</strong></a></li> 
    </ul> 
    <div id="tabs-1" class="PageContent">
    </div>
    <div id="tabs-2" class="PageContent">
    </div>    
</div>

JS

<script type="text/javascript">
    $(function () {
        $tabs = $('#tabs').tabs();
        $tabs.tabs({select: function (event, ui) {
                if (ui.index == 0 || ui.index == 1 || ui.index == 2) {
                }
                var url = $.data(ui.tab, 'load.tabs');
                if (url) {
                    location.href = url;
                    return false;
                }
                return true;
            }});
    });
</script>

Answer №1

One great option is to utilize

bootstrap-tabdrop.js

Find the download link here: https://github.com/jmschabdach/bootstrap-tabdrop

Implement it in your code like so

                         <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#tab_1_1" data-toggle="tab"> Home </a>
                                    </li>
                                    <li>
                                        <a href="#tab_1_2" data-toggle="tab"> Profile </a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> Dropdown
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 1 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 2 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 3 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 4 </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

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

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

What is the most effective method for storing multiple data points in an array?

I have developed the following script: let data = [ {day: 1, time: '08:00', note: 'madrid'}, {day: 2, time: '08:00', note: 'barcelona'}, {day: 3, time: '10:00', note: 'juve ...

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

Retrieving HTML content from an AJAX request

Is it possible to query HTML data returned from an AJAX request? I attempted the following code: $.post("gethtml.php", { url: $url.val() }, function(data) { var $html = $(data), $links = $("link, script, style", $html), $body ...

Positioning an image on the left side of a div within a flex container using

Here is the code I have: .usp-bar { display: flex; flex-wrap: wrap; background-color: #005932; color: #fff; font-weight: 700; padding: 10px 0; margin-top: 0; ju ...

Utilizing Regular Expressions to remove specific CSS attributes from an HTML content

I'm facing a challenge with my telerik RadEditor where users can input HTML that gets saved to my database. While this usually works well, I encounter issues when the CSS attributes position: absolute; or z-index: 100; (any # for z-index) are present ...

Vue's watch feature will not execute if the watched property remains unchanged during a page reload

<template> <!-- The navbar has a property for gender, the color of the navbar will change depending on the gender --> <!-- pass the props gender through a form submission and event --> <div class="nav-main" :class="{f ...

Dialog loading is only possible to occur once, but there are specific conditions that must be

My HTML file contains a button that triggers the loading of a modal dialog to search for information and return the results to the form. The button and search function work correctly, but after returning data to the form and closing the dialog, the button ...

How can I integrate checkboxes in a list view with jQuery Mobile?

How can I display the status of users with three different levels in a list view? I need to show whether they are attending or not, similar to the image provided. The issue is that currently the checkbox appears below the name, but I want it to be at the r ...

What is the best way to include a targeted href link within HTML code?

During the process of creating a website using bootstrap 4, I included the following snippet of HTML code: <form action="https://www.youtube.com/watch?v=pQN-pnXPaVg" target="_blank"> <button>Start</button> </form> Despite li ...

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

Ways to conceal a division within the Repeater

Currently, I am developing a VB ASP.NET site using Visual Studio 2012 Express for Web. Within my project, there is a Repeater containing two div elements with the css classes .dnnFormLabel and .dnnFormItem. Here is a snippet of code from the Repeater: < ...

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Within my newsletter.html file, I have set up a newsletter where users can submit their email addresses, which are then stored in my JSON file. In homepage.html, I embedded an iframe from the newsletter.html file. Everything seems to be working fine, exce ...

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

"Utilizing jQuery, Ajax, and JSON to submit data enclosed in single quotation marks

After searching extensively, I am still on the lookout for a sophisticated solution to my current dilemma. I have an ASMX web service in .NET that needs parameters to be invoked. To make the call to the service, I am utilizing jQuery on the client side, a ...

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

What is the proper way to utilize several initialization functions simultaneously?

I have been pondering the concept of using multiple initialization functions and whether it is considered bad practice. When I refer to an initialization function, I am talking about one of the following scenarios: $(document).ready(function(){ //... ...