Becky Becky - 6 months ago 9
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

service-display-box
section to appear (I have it set as
display:none
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
service-display-box
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>
</div>
</div>


I want to show this:

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


Fiddle

Answer

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() {
    $('.service-tab-block').css({"background":"purple"});
    $(this).css({"background":"#000", "color":"#FFF"});

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

https://jsfiddle.net/esayoaqg/1/