CODEWITHSUNDEEP
htmlcsswordpressbutton
Andrew Truckle
Andrew Truckle

Reputation: 19107

Marking the clicked button as active

Given this HTML:

<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>

Here is the fiddle: Fiddle

They look like:

Buttons

Is it possible so that when one button is clicked it kind of becomes activated and thus has a thicker border or some other indicator. And then, if you click the other button, that one shows as active and the other reverts back to normal styling?

In addition, when the page is first displayed it would know which to show as active. In context these buttons are related to a bbPress support forum and toggling between two editors.

Can what I want to do be achieved with CSS?

Upvotes: 0

Views: 1344

Answers (5)

Mangesh
Mangesh

Reputation: 365

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>

Upvotes: 1

Fabian Bron
Fabian Bron

Reputation: 106

You can do this with Jquery:

<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/

Upvotes: 1

Stender
Stender

Reputation: 2492

With only CSS

.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>

With 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>

Upvotes: 1

Awais
Awais

Reputation: 4902

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

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

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

// Loop through the buttons and add 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";
  });
}

Upvotes: 1

WizardCoder
WizardCoder

Reputation: 3461

You can use :focus, but it may not behave how you want in practice. I would recommend using javascript/jQuery instead.

.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>

Upvotes: 1

Related Questions