On button click, effect multiple elements on page. - button

Question

I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><?php the_field('button_1'); ?></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><?php the_field('button_2'); ?></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><?php the_field('button_3'); ?></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf

Answer 1

the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})