Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

I am working on a button group and need to hide the second button dynamically.

However, I am facing an issue where the first button has a 90° border. How can I adjust the code below to display button 1 with a rounded border?

If I decide to hide "button 2," the visual appearance is affected.

$("#btn1").click(function() {
   $("#btn2").show();
});
$("#btn2").click(function() {
   $("#btn2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

To show or hide an element and adjust the radius, you can toggle a class:

$("#btn1").click(function() {
   $("#btn1").removeClass('hide');
});
$("#btn2").click(function() {
   $("#btn1").addClass('hide');
});
button.hide + button {
  display:none;
}
button.hide {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Answer №2

To achieve this effect, you can follow these steps:

$("#btn1").click(function() {
  $("#btn2").show();
  $("#btn1").removeClass("myBorder");
});
$("#btn2").click(function() {
  $("#btn2").hide();
  $("#btn1").addClass("myBorder");
});
.myBorder {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

A recommended approach is to define a specific class and then dynamically add or remove it based on your requirements.

Answer №3

Struggling to modify the border of the nth button in Bootstrap's input-group? The style you're battling against is:

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Rather than wrestling with custom CSS and Bootstrap conflicts, consider removing the item from the DOM instead of hiding it.

var btn = $("#btn2"), parent = btn.parent()
$("#btn1").click(function() {
   btn.appendTo(parent)
});
$("#btn2").click(function() {
btn.detach()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Check out this speed comparison of the different solutions: https://jsperf.com/show-detach-css2.

Coding isn't just about performance; it's also about solving problems efficiently. When using a framework like Bootstrap, you are accepting its predefined styles, and constantly fighting against them is never simple.

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 it possible to create a horizontal navigation bar with buttons that scrolls when media queries are activated? I am looking for a solution using HTML,CSS, JavaScript, and Bootstrap

Struggling to create a horizontally scrollable navigation with buttons for media queries in Bootstrap 5.2, using SCSS for styling. This project is starting to feel overwhelming as we try to replicate the EA site. We're aiming to mimic the behavior of ...

javascripthtmlsassscrollbootstrap-5

Instructions on how to change the color of specific text to red

Issue: While working on my testimonials page, I am facing a problem with displaying an "ADMIN" tag in red color instead of normal stars for one of the responses by an admin. I have tried various solutions like removing the ending p tag and adding quotes to ...

html

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

javascriptjquerycsshtml-table

Icon button with label positioned underneath - utilizing Font Awesome icons

I am looking to design a button that features a Font Awesome icon with text below it for a navigation menu. The goal is to achieve a layout similar to the icons found in the Microsoft ribbon. Additionally, I want to include an arrow below the button (simi ...

htmlcssfont-awesome

What is the correct way to specify the type in my functional component?

I was trying to define the type in my component in a different way, I know it can be done using classes but is there a way to achieve this with functional components without exporting the interface? Despite my extensive research, I couldn't find any r ...

javascripttypescriptreact-nativeecmascript-6

Unable to transfer object from Angular service to controller

I am currently utilizing a service to make a $http.get request for my object and then transfer it to my controller. Although the custom service (getService) successfully retrieves the data object and saves it in the responseObj.Announcement variable when ...

javascriptangularjstypescript

Problems Arising from Bootstrap Label and Input Field Alignment

I'm encountering an issue with my Angular app that uses Bootstrap 4. I'm trying to have my form label and input text box appear on the same line, but instead, they are displaying on separate lines. I've tried searching for a solution, but ha ...

htmlcssangulartwitter-bootstrapbootstrap-4

How to filter out content not contained within a specific form tag using Javascript

One feature of my webpage displays restaurant reviews, each with a like button. However, the issue arises when submitting the like form: everything within and outside of a particular form tag gets sent to the back-end. This makes it challenging to determin ...

javascriptajaxformssubmitejs

Unable to modify the date input format in Angular when utilizing the input type date

I am currently working with angular 10 and bootstrap 4. I am trying to update the date format in an input field from (dd/mm/yyyy) to DD/MM/YYYY, but I am facing issues. Below is my angular code: <input type="date" id="controlKey" cl ...

angulardatebootstrap-4

The validations continue to function properly even when HTML has been removed

In my form, I have implemented an "addmore" functionality that allows users to dynamically add a set of HTML input fields. Users can also remove the added rows if needed. While everything is functioning correctly, I am encountering an issue where validatio ...

javascriptphpjquerytwitter-bootstrap-3formvalidation-plugin

What is the best way to extract inner HTML content using Regular Expressions?

<div class="colmask"> <h1 class="continent_header"><a name="US"></a>US</h1> <div class="colmid"> <div class="colin"> <div class="colleft"> ....... ....... ...

c#htmlregex

Leveraging jQuery template for JSON visualization

I've been struggling for days to understand how to render JSON data using jQuery templates with no luck. I was hoping someone could help me figure out where I'm making a mistake. The JSON data I am working with looks something like this: [{"pk" ...

javascriptjqueryjsonjquery-templates

Most effective strategy for optimizing web font loading considering caching and load speeds

When it comes to embedding fonts in your web app, there are a few different methods you can use. Method A) One way is to utilize the Google Fonts CDN by inserting this code into your HTML: <link href="https://fonts.googleapis.com/css2?family=Roboto:wg ...

htmlcssfont-face

Is there a way to dynamically adjust Facebook meta tags settings?

I'm currently facing an issue with my opencart site where I want to configure the facebook share options for my products. Unfortunately, setting the facebook meta tags directly in the header.tpl file is proving to be a challenge since everything is l ...

phpjqueryfacebookopencart

Encountering an issue with Discord JS that says "unable to access property 'content' because it is undefined"

CODE IS BELOW I have recently created a discord bot and included a message file within the events--guild directory. module.exports = (Discord, client, message) => { const prefix = '!'; if(!message.content.startsWith(prefix) || mess ...

javascriptnode.jsdiscorddiscord.js

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox

How can you transform a nested array into a flat JavaScript map?

If we consider a JavaScript Map structured like this: [ { id: 1, name: "Foo", contents: [1,2,3], morecontents: ["a","b"], }, { id: 2, name: "Bar", c ...

javascriptnode.js

Executing an SQL delete query with a button click using a JavaScript function in PHP

I have created a setup with three essential files - index.html, database.php, and function.js. In database.php, there is a form generated containing a delete button that triggers the deletion SQL query when clicked. The primary objective is to present a ta ...

javascriptphphtmlmysqlajax

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

Ways to implement a percentage for scrollTop

I'm currently troubleshooting the code below. My goal is to understand why I'm unable to scroll the .post div with jQuery and input range properly using a percentage value like this: $("[type=range]").on('input',function(){ var v ...

javascriptjqueryscrolltop