bootstrap 4 pills remain active even after being clicked once

My goal is to create vertically aligned bootstrap pills with custom styling for my website, but I've encountered a problem. When one pill is active (after clicking on it), it doesn't deactivate when clicking on another tab next to it. This makes it difficult for me to switch between tabs effectively. Additionally, the 3rd to 6th pills are not functioning as expected.

DEMO

A snippet of the CSS code used for styling the pills:

.h-bstfecture-ul{
  list-style: none;
}
... (CSS code continues) ...

How can I resolve this issue?

Link to the problematic file: https://github.com/Kanchon-Gharami/problems-share-in-git.git

htmlcssbootstrap-4

Answer №1

The issue at hand is that you are attempting to apply the pill class to elements that are not a tags.

In Bootstrap's documentation on JavaScript behavior, all examples demonstrate the use of pill with a tags.

Moreover, under Via JavaScript, the following code snippet can be found:

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

This code likely handles the functionality related to pill, revolving around the usage of a tags.

Below is a simplified demo based on your code that effectively utilizes pills with a tags and correct href attributes linking to respective ids (fine-tuning the blue background is left for optimization):

.h-bstfecture-ul{
  list-style: none;
}

.h-bstfecture-ul li{
  padding-top: 30px;
  padding-bottom: 30PX;
  padding-right: 45PX;
  padding-left: 20PX;
  border-top: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.h-bstfecture-ul li a{
  text-decoration: none;
  color: #222222;
  font-size: 12px;
  margin-top: 4px;
}


.h-bstfecture-ul li img{
  max-height: 26px;
  max-width: 26px;
  /*fill: #222222;
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
}

.h-bstfecture-ul li:hover a{
  color: #FFC000;
}

.bestservice-pillstitle{
  color: #222222;
  font-size: 28px;
  font-weight: 600;
}

.bestservice-pills-paragraph{
  color: #777777;
  font-size: 14px;
}

.bestservice-pillscontent ul{
  list-style: none;
}

.bestservice-pillscontent ul li{
  border: 1px solid #E5E5E5;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #777777;
  font-size: 14px;
}

.ylw-tik{
  width: 12px;
}

.our-service-title{
  color: #222222;
  font-size: 24px;
  font-weight: 600;

}

.our-service-title:before, .our-service-title:after{
  content:" ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  width: 30px;
  height: 4px;
  background-color: #FFC000;
}


.our-service-subtitle{
  color: #777777;
  font-size: 14px;
  max-width: 650px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473329322934">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca8b2a9b2af">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="content-fluid">
  <div class="row d-flex justify-content-center m-0 mb-5">
    <div class="our-service-head">
      <p class="our-service-title text-center">Our Best Features</p>
      <p class="our-service-subtitle text-center px-3">
        Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis. 
      </p>
    </div>
  </div>
  <div class="row m-0 d-flex justify-content-center">
    <div class="bestservice-pills col-xl-2 mx-3 p-0">
      <ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <li class="row m-0 nav-item">
          <a href="#v-pills-home" class="ml-2 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
            Efficient Inspection
          </a>
        </li>

        <li class="row m-0 nav-item">
          <a href="#v-pills-profile" class="ml-2 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
            Employee Safety
          </a>
        </li>
      </ul>
    </div>

    <div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">


      <!-- 1st pill -->             
      <div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>1st</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>2nd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
        <p>3rd</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
        <p>4th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
        <p>5th</p>
      </div>

      <div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
        <p>6th</p>
      </div>


    </div>

    <div class="col-xl-3 border border-primary mx-1 p-0">
      <div class="m-0">
        <img src="images/best fecture-1.png">
      </div>
    </div>
  </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

Validation is specific to a single button in the form

Just starting out in web development, I've created a form with two buttons and a JavaScript function to validate the form upon submission: function validateForm() { var freq = document.forms["schedulerForm"]["frequency"].value; if(fre ...

javascripthtmlformsvalidation

Can you navigate to HTML files using Vue router?

Hey there! I'm currently utilizing VueJS along with the webpack template. I've got a variety of components that I can easily showcase with Vue Router. However, the testing framework utilized by my team is Robot Framework and we typically create a ...

htmlvue.jsvue-componentrobotframeworkvue-router

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Effortlessly navigate to the start of a section once the expander box is collapsed with this simple trick!

The link to the page I'm talking about can be found here: If you're looking for the JQuery page, you can access it here: When you click on "Read More," my goal is for the page to scroll up to the heading (<h1>) or the beginning of the d ...

jqueryhtmlexpander

Creating a row with 5 columns in Bootstrap 4 dynamically is a handy trick for enhancing the layout of your website

Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...

cssbootstrap-4

Using Goquery to retrieve text content from one HTML tag and append it to a different tag

Apologies for the vague title, let me clarify using an example. This question is a follow-up to a previous one that partially resolved my issue. I've included most of the background information from the previous question here. I'm relatively new ...

htmlgoconcatenation

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

javascripthtmlnode.jsangularnpm

Transmitting data for a PHP variable within Wordpress.org

I am a newbie when it comes to PHP programming. Currently, I am working on a WordPress web page where selecting an option from a drop-down menu and clicking a button labeled "Consultar" in a form should display the queried data in a table below. However, ...

phphtmlwordpress

How can you display two images by hovering your mouse over them?

I am attempting to create a header that resembles the one found at . I am curious about how they were able to make it flash when hovering over the home button. I understand that two images are required for this effect, but I am unsure of the specific func ...

javascripthtmlmouseoverrollover

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

When utilizing the ::first-letter pseudo-element on <sub> and <sup> tags

Why is the <sub> and <sup> not supporting the ::first-letter CSS pseudo-element? Any solutions? p:first-letter, sub:first-letter, sup:first-letter { color: red; font-weight: bold; } <p>This text contains <sub>subscript</su ...

javascripthtmlcss

Updating choices in dropdown list depending on the selected options in another dropdown list

Is there a way to dynamically change the options in a second dropdown based on the selection made in the first dropdown using jQuery? <select id="Manage"> <option value="a">A</option> <option value="b">B</option> < ...

htmljqueryhtml-select

An error that cannot be recovered from occurred: Trying to access a method called viewConfessionLikes() that is

Greetings! I am currently facing an issue on my website where the page displaying the most liked post is showing an error message: Fatal error: Call to undefined method Confession::viewConfessionLikes() on line 55 Unfortunately, this page is not showing a ...

phphtml

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

Having trouble with my Javascript code - my HTML page is refusing to load and the innerHTML

Below is my code in the HTML file. I have implemented a flatpickr date picker to allow users to select a date. On closing the calendar, I intend to update the current document by adding some HTML content. However, this functionality does not seem to be wor ...

javascripthtml

Is there an easier way to coordinate CSS other than relying on JS?

It seems like I'm continuously resorting to using JavaScript too frequently for tasks that should ideally be achievable with CSS alone. Let's consider a specific scenario I'm tackling: div.outer { height:{Y}px } div.inner { padding-top:{Y} ...

javascriptjqueryhtmlcss

How can you move away from using the url:port scheme with socket.io?

Recently, I've been delving into node.js and socket.io, but I'm struggling to eliminate the need to type "url:port" in the browser. Instead, I want users to simply enter the URL and have everything load up, similar to my work-in-progress single p ...

javascripthtmlnode.jssocket.io

efficient method for generating href/src relative paths based on the current file within HTML tags

Recently, I've taken to using sublime text 2 and I'm on the lookout for a quick method to generate relative path references to use for creating hrefs or src links. For instance, imagine I have the following file structure: myfolder |-->css | ...

htmlsublimetext2

Receive information from a form and store it in an array

Struggling to figure out how to convert this into an array. I'm having trouble grasping the concept of taking input from a form and storing it in an array. In my project instructions, it clearly states: Do NOT save the input in variables and then tra ...

javascripthtmlarrays

Struggling with displaying and hiding div elements

Here is the code I'm currently working on: https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF I am relatively new to JavaScript, HTML, and CSS. I am facing an issue where the main menu page should disappear when the start button is ...

javascriptjqueryhtmlcss