Display Buttons in a Horizontal Row and Highlight the Active Button

Question

Display Buttons in a Horizontal Row and Highlight the Active Button

I am presenting four buttons that trigger POST requests, therefore they are enclosed in a form:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST>
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

I would like to know how I can

arrange the four buttons horizontally and evenly spaced across the page (rather than all together)
employ JS/JQuery or plain CSS to highlight the clicked button with the btn-success class while removing it from the others.

Even though these are POST requests, users will be redirected back to the same page, so ideally the last clicked button should appear as active.

javascript jquery css bootstrap-4

Answer 1

Answer №1

Set the buttons to display inline-block:

form[action^="books/"] {
  display: inline-block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST">
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

Use jQuery to handle classes:

$('form[action^="books/"] > input').on("click", function (event) {
  if (event.target !== this) return; //Event was bubbled to the form
  
  event.preventDefault(); //Prevent the submission, can be removed as it is purely for example
  
  $('form[action^="books/"] > input').removeClass("btn-success");
  
  $(this).addClass("btn-success");
});

form[action^="books/"] {
  display: inline-block;
  margin: 5px; /*Fix position*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST">
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

I hope you find this useful!

Answer 2

Set the buttons to display inline-block:

form[action^="books/"] {
  display: inline-block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST">
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

Use jQuery to handle classes:

$('form[action^="books/"] > input').on("click", function (event) {
  if (event.target !== this) return; //Event was bubbled to the form
  
  event.preventDefault(); //Prevent the submission, can be removed as it is purely for example
  
  $('form[action^="books/"] > input').removeClass("btn-success");
  
  $(this).addClass("btn-success");
});

form[action^="books/"] {
  display: inline-block;
  margin: 5px; /*Fix position*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST">
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

I hope you find this useful!

Answer 3

Answer №2

Dealing with Content Alignment

When it comes to aligning content, there are various methods at your disposal. Options like flexbox, grid, or utilizing classes for centering items through translations can be explored. In this scenario, employing flexbox seems like a suitable choice due to its user-friendly nature.

For more insights, refer to: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Regarding Page Reloading

I strongly advise against reloading the page using POST-Requests.

If absolute necessity demands it, one could establish the "active" class logic based on the URL. This simple if-else logic would ideally reside within the page controller or relevant component in use.

In scenarios where page reload is not mandatory, toggling classes via JavaScript remains a viable option. However, do note that such changes will not persist post-reload. For single-page applications, this might suffice. While storing selection states in cookies or sessions is plausible theoretically, it may not be the ideal approach.

Another approach involves incorporating links with route symbols like # within the href. This enables state retention within the URL sans page reloading, facilitating direct scrolling or jumping to referenced elements.

The example demonstrated below illustrates how selection status is lost after a reload:

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    e.preventDefault();
    selectItem(i, menuItems);
    return false;
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a href="books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a href="books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a href="books/biography" class="btn btn-md" role="button">Biography</a>
  <a href="books/new" class="btn btn-md" role="button">New</a>
</nav>

An alternative method you could implement is as follows:

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    selectItem(i, menuItems);
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a id="#books/all" href="#books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a id="#books/fiction" href="#books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a id="#books/biography" href="#books/biography" class="btn btn-md" role="button">Biography</a>
  <a id="#books/new" href="#books/new" class="btn btn-md" role="button">New</a>
</nav>

The # symbol can also be utilized in CSS by means of the :target selector.

Answer 4

Dealing with Content Alignment

When it comes to aligning content, there are various methods at your disposal. Options like flexbox, grid, or utilizing classes for centering items through translations can be explored. In this scenario, employing flexbox seems like a suitable choice due to its user-friendly nature.

For more insights, refer to: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Regarding Page Reloading

I strongly advise against reloading the page using POST-Requests.

If absolute necessity demands it, one could establish the "active" class logic based on the URL. This simple if-else logic would ideally reside within the page controller or relevant component in use.

In scenarios where page reload is not mandatory, toggling classes via JavaScript remains a viable option. However, do note that such changes will not persist post-reload. For single-page applications, this might suffice. While storing selection states in cookies or sessions is plausible theoretically, it may not be the ideal approach.

Another approach involves incorporating links with route symbols like # within the href. This enables state retention within the URL sans page reloading, facilitating direct scrolling or jumping to referenced elements.

The example demonstrated below illustrates how selection status is lost after a reload:

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    e.preventDefault();
    selectItem(i, menuItems);
    return false;
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a href="books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a href="books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a href="books/biography" class="btn btn-md" role="button">Biography</a>
  <a href="books/new" class="btn btn-md" role="button">New</a>
</nav>

An alternative method you could implement is as follows:

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    selectItem(i, menuItems);
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a id="#books/all" href="#books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a id="#books/fiction" href="#books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a id="#books/biography" href="#books/biography" class="btn btn-md" role="button">Biography</a>
  <a id="#books/new" href="#books/new" class="btn btn-md" role="button">New</a>
</nav>

The # symbol can also be utilized in CSS by means of the :target selector.

Answer 5

Answer №3

For those wondering about CSS, I recommend looking into Flexbox. Check out this guide to Flexbox here.

In response to the second question, I've attempted a solution, but I'm not entirely sure if it aligns with what you're seeking. When a form is submitted, the browser typically refreshes the page, undoing any changes made by JavaScript or jQuery.

I'm new to stack overflow, so please feel free to provide feedback on my answer if there are any inaccuracies.

$(() => {
  $('.btn').click(function(event) {
    currentButton = event.currentTarget;
    $(currentButton).toggleClass( "btn-success" );
  });
});

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  padding: 16px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <button class="btn btn-md">Example button to test the jQuery</button>
  <form action="#" method="POST">
    <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
  </form>
  <form action="books/fiction" method="POST">
    <input class="btn btn-md" type="submit" value="Fiction"></input>
  </form>
  <form action="books/biographys" method="POST">
    <input class="btn btn-md" type="submit" value="Biography"></input>
  </form>
  <form action="books/new" method="POST">
    <input class="btn btn-md" type="submit" value="New"></input>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Answer 6

For those wondering about CSS, I recommend looking into Flexbox. Check out this guide to Flexbox here.

In response to the second question, I've attempted a solution, but I'm not entirely sure if it aligns with what you're seeking. When a form is submitted, the browser typically refreshes the page, undoing any changes made by JavaScript or jQuery.

I'm new to stack overflow, so please feel free to provide feedback on my answer if there are any inaccuracies.

$(() => {
  $('.btn').click(function(event) {
    currentButton = event.currentTarget;
    $(currentButton).toggleClass( "btn-success" );
  });
});

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  padding: 16px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <button class="btn btn-md">Example button to test the jQuery</button>
  <form action="#" method="POST">
    <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
  </form>
  <form action="books/fiction" method="POST">
    <input class="btn btn-md" type="submit" value="Fiction"></input>
  </form>
  <form action="books/biographys" method="POST">
    <input class="btn btn-md" type="submit" value="Biography"></input>
  </form>
  <form action="books/new" method="POST">
    <input class="btn btn-md" type="submit" value="New"></input>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Display Buttons in a Horizontal Row and Highlight the Active Button

Answer №1

Answer №2

Dealing with Content Alignment

Regarding Page Reloading

Answer №3

Similar questions

If I needed to include extra information within an element for easy retrieval using JavaScript

Showing a vertical arrangement of lists containing updated information

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

React Native - Issue with Chart not updating correctly when new data is added

Checking for CSS-truncated text with JavaScript

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

I am having trouble with my scripts not working on a rendered partial view after using ajax to render it. Specifically, my datetimepicker is not functioning properly

What are the steps for positioning the footer at the bottom of the page?

jQuery tabs become non-functional following submission of form

The JSON data appears to be correct, yet it is not functioning properly when transmitted to X

Is it possible to modify a dependency import based on the specific request?

Utilize data attributes for streamlined markup efficiency

using vuejs, learn how to retrieve properties within the .then function

Attempting to display numerous react components on various divs instead of just one ID

The premature reveal of the back side in the Kendo UI flip effect on Internet Explorer

Tips for integrating leaflet maps according to the number of elements in your dataset

Having trouble displaying json data in an HTML file with d3.js

Incorporating Bootstrap 4 into your Grails project

What is the best way to design a grid consisting of 14 divs that span the entire width of the browser screen, incorporating dividers to separate different groups, utilizing a combination of html,

When the text input is selected, automatically scroll to the bottom