Display element exclusively when nav-tab is in an active state in Bootstrap 4

I'm working on creating nav-tabs with a unique feature where an arrow is displayed only on the active tab. How can I make this arrow disappear when another tab is clicked? Alternatively, how can I move the arrow to point to the content of the selected tab?

Below is a snippet of my code outline:

.arrow-down {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid white;
    margin-left: 20px;
}
.nav-tabs {
    background-color: black;
}
.tab-content {
  background-color: #ccc
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
    <div class="arrow-down"></div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To display the arrow, apply a specific class and set up a click event for all menu items. Remove any existing arrows and then add the arrow to the currently selected tab.

.active-arrow {
  display: block;
}

You can use flexbox to center the arrow and adjust the margin-top property for precise positioning.

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
}


$('ul a.nav-link').on('click', function(e) {
  $('.arrow-down').removeClass('active-arrow');
  $(this).next('.arrow-down').addClass('active-arrow');
})
.arrow-down {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid white;
  display: none;
  margin-top: 28px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-arrow {
  display: block;
}

.nav-tabs {
  background-color: black;
}

.tab-content {
  background-color: #ccc
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
    <div class="arrow-down active-arrow"></div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
    <div class="arrow-down"></div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
    <div class="arrow-down"></div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
    <div class="arrow-down"></div>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">1</div>
  <div class="tab-pane" id="profile" role="tabpanel">2</div>
  <div class="tab-pane" id="messages" role="tabpanel">3</div>
  <div class="tab-pane" id="settings" role="tabpanel">4</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

Tips for ensuring a modal stays fixed while scrolling

I need help with a pop up modal on my website. I want the modal to stay in place even when scrolling down the page. Here is the code for my modal: <div class="modale" id="ouibounce-modal" style="display:none"> <button type="button" i ...

htmlcssbootstrap-4

Incorporating a variety of images into this hexagonal design framework

Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without rep ...

htmlcsscss-shapes

Section CSS for Full Page Styling

Embarking on my first freelance project to create a website, I have some expertise in html/css, Ruby Rails, and Bootstrap. However, there is one aspect that I can't seem to figure out. How do I make specific sections of the page occupy the entire brow ...

csstwitter-bootstrapsass

In jQuery, you can arrange an array in order and retrieve the first key

I have an array with key-value pairs and want to sort it by value, then retrieve the key of the first value. var obj = { fruit:5, vegetable:3, meat:7 }; var tempArr = [ ]; $.each(obj, function(key, value) { tempArr.push({k: key , v:value}); }); tempArr.s ...

jqueryarrayssorting

The ng-include directive in Angular seems to be malfunctioning when trying to include the intended link

Imagine having a hyperlink <a href="#one">Click here</a> and an article: <article id="one"><h2>This is the destination</h2></article> When the hyperlink is clicked, it should take you to the article. However, when mo ...

javascripthtmlangularjsangularjs-ng-include

Choose distinct and original dialogue for every option selected

My goal is to design a unique confirmation dialog that will display for each option selected. Currently, I have it set up so that the dialog will only appear if the selected option is lower than the previously selected one. Everything seems to be working f ...

jqueryhtmlcsshtml-selectcustom-data-attribute

The SlideToggle feature of the div element is not functioning as expected

Here is the code I am working with: $('.close-button').click(function() { $(this).closest('#hidden').slideToggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div cla ...

jquery

The image tag in HTML is unable to display as an image within the jQuery object

After converting the object "suggestion" to a string, I have data stored in the "sugestion" variable like this: {"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"} Unfortunatel ...

javascriptjqueryhtmlcssimage

What is the process for transferring inputted values from a form on one HTML page to variables on another HTML page?

For the website I am currently developing, I have implemented a form on an options page with the following code: <form method="POST" action="process.asp" name="form1"> <table width="70%" border="0" cellspacing="0" cellpadding="0"> ...

javascripthtmlasp-classic

There seems to be an issue with sending the $_POST data

My straightforward form was functioning well, but now I am facing an issue where the post data is not being sent, and I am unable to identify the problem. <form role="form" name="challengeform" action="scripts/arena_setup.php" method="POST" onsubmit="r ...

phphtmlformsposthttp-post

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

javascriptandroidjqueryhtmlwebview

Execute multiple animations simultaneously using jQuery

Could you please make sure that the first group of animations run simultaneously before the second group of code is executed? Much appreciated! $('#logo').fadeIn({queue: false, duration: 2000}); $('#logo').animate({ width: "300px" }, 2 ...

javascriptjqueryanimationjquery-animate

jQuery is unable to manipulate newly added DOM elements that have been loaded via AJAX

Having trouble with jquery ajax. Unable to interact with newly added element through ajax. Code snippet: $(".yorum_input").keypress(function(e) { if (e.keyCode == 13) { e.preventDefault(); var alt_id = $(this).attr('yorum_id'); va ...

javascriptjqueryajaxdom

Using Jquery to add text at the beginning of a Gmail signature

I am currently working on creating a tool using InboxSDK, which adds text to the end of an email message just before the signature. InboxSDK provides the message body as an HTML Element, and I am experimenting with using Jquery to insert the text. The chal ...

javascriptjqueryhtmlgmail

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

Filter and arranging elements with Jquery

Recently, I started learning programming and javascript. I managed to create a tab menu using JQuery. You can check out my fiddle here I attempted to utilize the ng-repeat="chart in charts|filter:{category: 'Where'} loop with hopes of display ...

jquerylistangularjssorting

Choose from the dropdown menu and verify with a CAPTCHA

I am currently working on my website. I need help with implementing a dropdown menu that allows for selecting multiple options at once. Can anyone provide guidance on JavaScript validation and also captcha implementation? The current script only allows for ...

phpjavascriptjqueryhtmlcss

Tips for Updating Information within a Table with the Help of jQuery, AJAX, PHP, and MySQL

I need some assistance! Here's the scenario: There are two tables containing data from the database. The number of tables varies based on the user posting them. I utilized a "while loop" to display the table with data on the page. Now, I want the d ...

phpjquerymysqlajax

My Bootstrap 4 table is not displaying as responsive

Need assistance with displaying a table in a Bootstrap 4 HTML template in a 320x480 view. The table is not responsive even when the .table-responsive class is added. Any idea what could be causing this issue? Here is the HTML code snippet with the table: ...

htmltwitter-bootstraphtml-tableresponsivetwitter-bootstrap-4

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss