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><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></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
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");
})