I've edited the code from the last time I posted this question using some advice, unfortunately the 'DUPLICATE' that I was linked to also did not fix the problem. Here is the code I'm working with: <button class="brxe-button main-cta-button pricing-btn faq-btn bricks-button bricks-background-primary">Pricing</button> <button class="brxe-button main-cta-button plans-btn faq-btn bricks-button bricks-background-primary">Plans</button> <button class="brxe-button main-cta-button seo-btn faq-btn bricks-button bricks-background-primary">SEO</button> <button class="brxe-button main-cta-button websites-btn faq-btn bricks-button bricks-background-primary">Websites</button> <div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div> <div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Plans</div> <div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">SEO</div> <div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Websites</div> <script> jQuery(document).ready(function($){ $('.faq-btn').on('click tap touchstart', function(event) { event.preventDefault(); if($(this).hasClass('pricing-btn')){ $('.pricing-faq').show(); $('.plans-faq').hide(); $('.seo-faq').hide(); $('.websites-faq').hide(); $('.pricing-btn').css("background-color", "#a42d2f"); $('.plans-btn').css("background-color", "#fff"); $('.seo-btn').css("background-color", "#fff"); $('.websites-btn').css("background-color", "#fff"); $('.pricing-btn').css("color", "#fff"); $('.plans-btn').css("color", "#a42d2f"); $('.seo-btn').css("color", "#a42d2f"); $('.websites-btn').css("color", "#a42d2f"); } else if ($(this).hasClass('plans-btn')){ $('.pricing-faq').hide(); $('.plans-faq').show(); $('.seo-faq').hide(); $('.websites-faq').hide(); $('.pricing-btn').css("background-color", "#fff"); $('.plans-btn').css("background-color", "#a42d2f"); $('.seo-btn').css("background-color", "#fff"); $('.websites-btn').css("background-color", "#fff"); $('.pricing-btn').css("color", "#a42d2f"); $('.plans-btn').css("color", "#fff"); $('.seo-btn').css("color", "#a42d2f"); $('.websites-btn').css("color", "#a42d2f"); } else if ($(this).hasClass('seo-btn')){ $('.pricing-faq').hide(); $('.plans-faq').hide(); $('.seo-faq').show(); $('.websites-faq').hide(); $('.pricing-btn').css("background-color", "#fff"); $('.plans-btn').css("background-color", "#fff"); $('.seo-btn').css("background-color", "#a42d2f"); $('.websites-btn').css("background-color", "#fff"); $('.pricing-btn').css("color", "#a42d2f"); $('.plans-btn').css("color", "#a42d2f"); $('.seo-btn').css("color", "#fff"); $('.websites-btn').css("color", "#a42d2f"); } else if ($(this).hasClass('websites-btn')){ $('.pricing-faq').hide(); $('.plans-faq').hide(); $('.seo-faq').hide(); $('.websites-faq').show(); $('.pricing-btn').css("background-color", "#fff"); $('.plans-btn').css("background-color", "#fff"); $('.seo-btn').css("background-color", "#fff"); $('.websites-btn').css("background-color", "#a42d2f"); $('.pricing-btn').css("color", "#a42d2f"); $('.plans-btn').css("color", "#a42d2f"); $('.seo-btn').css("color", "#a42d2f"); $('.websites-btn').css("color", "#fff"); } }); }); </script> I've left all the code in this time just in case the CSS changing in the jQuery is somehow messing up the other stuff. Any help appreciated, thanks so much. Happy to provide the link to the site itself if needed, but I think that might be against the rules? Thanks.
Jese Leos
18 hours ago
Verified user
Consider more efficient code. It may be better to hide all and set all colors as a blanket event and then update just the target. jQuery(function($) { $(".brxe-container").hide(); $('.faq-btn').on('click tap touchstart', function(event) { event.preventDefault(); $(".brxe-container").hide(); var target = $(this).text().trim().toLowerCase(); $("." + target + "-faq").show(); $('.faq-btn').removeClass("highlight").addClass("dim"); $(this).toggleClass("dim highlight"); }); }); .highlight { background-color: #a42d2f; color: #fff; } .dim { background-color: #fff; color: #a42d2f; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <button class="brxe-button main-cta-button pricing-btn faq-btn bricks-button bricks-background-primary">Pricing</button> <button class="brxe-button main-cta-button plans-btn faq-btn bricks-button bricks-background-primary">Plans</button> <button class="brxe-button main-cta-button seo-btn faq-btn bricks-button bricks-background-primary">SEO</button> <button class="brxe-button main-cta-button websites-btn faq-btn bricks-button bricks-background-primary">Websites</button> <div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div> <div id="brxe-bilrmd" class="brxe-container plans-faq bricks-lazy-hidden">Plans</div> <div id="brxe-bilrmd" class="brxe-container seo-faq bricks-lazy-hidden">SEO</div> <div id="brxe-bilrmd" class="brxe-container websites-faq bricks-lazy-hidden">Websites</div> Run code snippetExpand snippet