Becky Becky - 1 year ago 40
Javascript Question

Clicking on a specific button to show a specific id

I am having trouble trying to figure out how to show a specific item when clicking on a specific button and then hiding the other siblings.

So, what I have is 6 buttons.

Service 1-6

If someone would click on service 1, I would want my

section to appear (I have it set as
on page load) and then for just the Service 1 content to appear.

The way I have it now, it hides the sibling buttons I have and doesn't show the
or any of the service areas.

I have included a fiddle below.

Service buttons - When you click on Service 1

<div id="service-tabs-container">
<div class="service-tab-block" id="service_tab1">Service 1</div>
<div class="service-tab-block" id="service_tab2">Service 2</div>
<div class="service-tab-block" id="service_tab3">Service 3</div>
<div class="service-tab-block" id="service_tab4">Service 4</div>
<div class="service-tab-block" id="service_tab5">Service 5</div>
<div class="service-tab-block" id="service_tab6">Service 6</div>

I want to show this:

<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>


Answer Source

You will need to get the number from the id on the service tab you want, then append that to the id of the service item box:

$('.service-tab-block').click(function() {
    $(this).css({"background":"#000", "color":"#FFF"});

    //To get the service display box to show
    var item_number = $(this).attr('id').replace('service_tab', '');