how can i toggle the color of the text inside a button

November 15, 2021

I’m trying to toggle the color of the text inside a button after it’s been clicked, currently the background color toggles on and off when clicking on a button, but the text color of all buttons change at same time, i’d only like the selected button to change, how do i fix this ?

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass("active");
});
$(document).on('click', '.newsbutton', '.btn-2', function() {
  $('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton">
            <p href="" class="btn-2">BBC</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">The Guardian</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Financial Times</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Metro</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Techcrunch</p> 
            </button>

>Solution :

You cannot have p inside button. Buttons can only have phrasing content. Use spans instead.

That being said, you are explicitly telling jQuery

$('.btn-2').addClass('selected');

to add that class to all elements matching .btn-2. Instead, use this and find:

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass('active').find('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton"><span class="btn-2">BBC</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">The Guardian</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Financial Times</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Metro</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Techcrunch</span></button>