I have a series of divs on a page with unique ID’s that all begin with the word "business".
I would like them all to be hidden by default on page load, then each one should be shown as the links across the top are clicked.
Buttons
<div class = "btn-wrapper">
<a href="#business-50" class="btn" target="_self">Business 50</a>
</div>
<div class = "btn-wrapper">
<a href="#business-100" class="btn" target="_self">Business 100</a>
</div>
<div class = "btn-wrapper">
<a href="#business-250" class="btn" target="_self">Business 250</a>
</div>
Divs
<div id="business-50" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>
<div id="business-100" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>
<div id="business-250" class="block wrapper block-11-2-three-cols-fix-tariffs-with-img"></div>
I have limited access to the source html and css, and can only change div# or run a script. I can create custom html blocks and code my own buttons, but because there is someone less code savvy who will be adding/removing buttons in the future, I would love to work within the html structure as it currently shows.
At the suggestion of another thread I have tried in my override file:
div[id^="business"] {display:none;}
div[id^="business"]:target {display:block;}
But I may not be understanding the use of the selector.
I have also tried to modify something like:
$(document).ready(function(){
$(".test").click(function(){
$("#showme").show();
$("#divsthatIwanttohide").hide();
});
});
<a href="#" class="test">Say Hi</a>
<div id="showme">Howdy</div>
But I got a bit turned around with the unique divs they were using.
2
Answers
Add a click event listener to each button using jQuery
simply :
In case of a Tabs interface: