CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Becky
Becky

Reputation: 2289

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

Upvotes: 3

Views: 177

Answers (1)

ntgCleaner
ntgCleaner

Reputation: 5985

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/

Upvotes: 4

Related Questions