Designating the selected button as "active"

Question

Designating the selected button as "active"

Consider the following HTML snippet:

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

View the fiddle here: Fiddle

Here is an image of how they appear:

https://i.sstatic.net/Wpkmu.png

Is it feasible to have a visual indicator when one button is clicked, such as a thicker border, and then have that change when the other button is clicked? Can this be achieved using CSS?

Moreover, upon page load, is it possible for one of the buttons to already appear as active? These buttons are used in a bbPress support forum to toggle between two editors.

html css wordpress button

Answer 1

Answer №1

Using CSS only

.wp-switch-editor:focus-within {
    border: thin solid black;
}

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Using jQuery

$('.wp-switch-editor').on('click', function(){
  $('.wp-switch-editor').removeClass('active');
  $(this).addClass('active');
});

.active {
  border: 1px solid #000;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Answer 2

Using CSS only

.wp-switch-editor:focus-within {
    border: thin solid black;
}

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Using jQuery

$('.wp-switch-editor').on('click', function(){
  $('.wp-switch-editor').removeClass('active');
  $(this).addClass('active');
});

.active {
  border: 1px solid #000;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Answer 3

Answer №2

To achieve the desired behavior, consider using javascript or jQuery instead of relying on :focus which may not give you the expected results.

.wp-editor-tabs button:focus {
  border:3px solid #000;
}

<div class="wp-editor-tabs">
  <button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
  <button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Answer 4

To achieve the desired behavior, consider using javascript or jQuery instead of relying on :focus which may not give you the expected results.

.wp-editor-tabs button:focus {
  border:3px solid #000;
}

<div class="wp-editor-tabs">
  <button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
  <button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Answer 5

Answer №3

HTML

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="btn wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
    <button type="button" id="bbp_topic_content-html" class="btn wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
    </div>

CSS

button {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

JS

// Locate the container element
var btnContainer = document.getElementById("myDIV");

// Find all buttons with class "btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Iterate through the buttons and apply the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 6

HTML

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="btn wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
    <button type="button" id="bbp_topic_content-html" class="btn wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
    </div>

CSS

button {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

JS

// Locate the container element
var btnContainer = document.getElementById("myDIV");

// Find all buttons with class "btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Iterate through the buttons and apply the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 7

Answer №4

If you want to achieve this using Jquery, here's how:

<style>
  .button{
    border:1px solid blue;
    height: 50px;   
    margin:10px;
  }
</style>

<button id="button1" class="button">Visual</button>
<button id="button2" class="button">Text</button>

<script>
   $('.button').click(function(){
       $(this).parent().find('.button').css('background-color','#ffffff');
       $(this).css('background-color','#ff0000');
   });
</script>

http://jsfiddle.net/Jeagerck/1v7h3szc/5/

Answer 8

If you want to achieve this using Jquery, here's how:

<style>
  .button{
    border:1px solid blue;
    height: 50px;   
    margin:10px;
  }
</style>

<button id="button1" class="button">Visual</button>
<button id="button2" class="button">Text</button>

<script>
   $('.button').click(function(){
       $(this).parent().find('.button').css('background-color','#ffffff');
       $(this).css('background-color','#ff0000');
   });
</script>

http://jsfiddle.net/Jeagerck/1v7h3szc/5/

Answer 9

Answer №5

var button = document.querySelectorAll("#bbp_topic_content-tmce")[0];
button.addEventListener("click", function(event) {
    var $classList = event.currentTarget.classList;
  if(!$classList.contains("clicked")) {
    $classList.add("clicked");
  } else {
    $classList.remove("clicked");
  }

});

var button = document.querySelectorAll("#bbp_topic_content-tmce")[0];
button.addEventListener("click", function(event) {
var $classList = event.currentTarget.classList;
  if(!$classList.contains("clicked")) {
  $classList.add("clicked");
  } else {
  $classList.remove("clicked");
  }

});

.clicked {
  background: red;
}

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Answer 10

var button = document.querySelectorAll("#bbp_topic_content-tmce")[0];
button.addEventListener("click", function(event) {
    var $classList = event.currentTarget.classList;
  if(!$classList.contains("clicked")) {
    $classList.add("clicked");
  } else {
    $classList.remove("clicked");
  }

});

var button = document.querySelectorAll("#bbp_topic_content-tmce")[0];
button.addEventListener("click", function(event) {
var $classList = event.currentTarget.classList;
  if(!$classList.contains("clicked")) {
  $classList.add("clicked");
  } else {
  $classList.remove("clicked");
  }

});

.clicked {
  background: red;
}

<div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button>
<button type="button" id="bbp_topic_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="bbp_topic_content">Text</button>
</div>

Designating the selected button as "active"

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The slider thumb on materialized CSS HTML5 Range is not visible

Convert the button element to an image

Is there a way to modify the button's color upon clicking in a React application?

Within a div element, there are links that I would like to hover over to emphasize the text

How to style two distinct elements within an HTML select tag option

Is there a way for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

ReactJS not displaying the class effect as intended

Empty vertical space on the right side in iPad view

Preselecting items in PrimeNG Checkbox: A step-by-step guide

Efficiently Filtering User Input and Other Things

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

Adjust the section and aside elements to automatically expand when used within the main tag

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Is there a possibility of encountering problems when collapsing table rows versus individual cells?

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

View the picture directly on this page

Styling HTML elements for Google custom search API json results: Best practices

Selecting a "non-operational" collection location on an e-commerce platform

The backtick is not functioning correctly when trying to append the result in the Internet Explorer browser

Animation fails to initiate when the object enters the viewport