Showing and hiding a list of items

Question

I am trying to make a page to where a service can be clicked on and then its description will show. I kind of have it figured out, but at the same time, it is far from where I want it.

Right now, I just have a services div for all of them and then a service_description div for the descriptions. Any service I click on shows all of the particular service descriptions. I want the service description to show up for only that service clicked on.

I am using a toggle approach. I'm not sure if that is the best option. Upon page load, everything is showing, which I do not want the descriptions showing unless clicked on.

Here is my code:

<script>
$(document).ready(function(){
    $(".service").click(function(){
        $(".service_description").toggle(1000);
    });
});
</script>

<div class="service_list">
    <button class="service">Floors</button>
        <div class="service_description">dsggafgg</div>
    <div class="service">Roofs</div>
        <div class="service_description">dsggafgg</div>
    <div class="service">Siding</div>
        <div class="service_description">dsggafgg</div>
    <div class="service">Paint</div>
        <div class="service_description">dsggafgg</div>
    <div class="service">Kitchen Remodels</div>
        <div class="service_description">dsggafgg</div>
</div>

I created a fiddle, but I am unsure of how to add in the Jquery library, it has changed since the last time I used it.

https://jsfiddle.net/huj2fkra/#&togetherjs=P1EtO37uUE

How can I single each service? I really don't want to make a toggle script with a bunch of different div's because if one service is selected, I want that description to go away if I click on another service.

Does anyone have any ideas?

Answer 1

I would wrap each service in a div like so:

<div class="service-wrapper">
  <div class="service-title">Floors</div>
  <div class="service-description">...</div>
</div>
<div class="service-wrapper">
  <div class="service-title">Roofs</div>
  <div class="service-description">...</div>
</div>
<div class="service-wrapper">
  <div class="service-title">Siding</div>
  <div class="service-description">...</div>
</div>
<div class="service-wrapper">
  <div class="service-title">Paint</div>
  <div class="service-description">...</div>
</div>
<div class="service-wrapper">
  <div class="service-title">Kitchen Remodels</div>
  <div class="service-description">...</div>
</div>

Then, you could do something like this (https://jsfiddle.net/3ofLfa4t/):

$('.service-wrapper').click(function() {
  var thisDescription = $('.service-description', $(this));

  // Hide all other descriptions
  $('.service-description').not(thisDescription).hide();

  // Toggle (show or hide) this description
  thisDescription.toggle();
});

The $('.service-description', $(this)) call just tells jQuery to lookup only the .service-description elements inside the wrapper that was clicked, ignoring those that are outside the wrapper.

Answer 2

You can use slideUp, slideDown:

$(document).ready(function () {
    $(".service_list .service_description").hide();
    $(".service").click(function(){
        $(this).next(".service_description").siblings('.service_description').slideUp(1000);
        if ($(this).next(".service_description").is(":visible")) {
            $(this).next(".service_description").slideUp(1000); 
        }else{
            $(this).next(".service_description").slideDown(1000);   
        }
    });
});