I work on a webpage and have an issue with displaying a description div for a list item.

When I click on a specific li (e.g. Work abo…), I’d like to toggle only the div for that particular li, but they all get toggled instead and I don’t seem to find where the problem is.

When I click on any list item inside the `#more_services ul`, I need to display the `div.secondary-services-description` below the particular li that was clicked on.

```js
$( document ).ready(function() {

//shows form

$('.login_color a').click(function(){

 $("#form").toggle();
 $("#form").click(function(e){
  e.stopPropagation();  //prevents the form from closing when clicking on it
 });
 return false;

 $("#form").fadeTo(1000,1);
 $("body").css({
   "-webkit-filter": "blur(5px)",
  "-moz-filter": "blur(5px)",
  "-o-filter": "blur(5px)",
  "-ms-filter": "blur(5px)",
  "filter": "blur(5px)"
 });  

});

//Image Slider

 var $slideIndex = 1;
 showSlides($slideIndex);

 $("#prev_slide").click(function(){
  plusSlides(-1);
 });

 $("#next_slide").click(function(){
  plusSlides(1);
 });

 function plusSlides(n) {
    showSlides($slideIndex += n);
 }

 function currentSlide(n) {
    showSlides($slideIndex = n);
 }

 function showSlides(n) {
  var $i;
  var $slides = $(".slides");
  if (n > $slides.length){
   $slideIndex = 1;
  }
  if (n < 1) {
   $slideIndex = $slides.length; 
  }
  for(i = 0; i <$slides.length; i++ ){
   $($slides[i]).css({"display": "none"});
  }
  $($slides[$slideIndex - 1]).css({"display": "block"});
 }

//adds the full description on each service when clicking on the service title

 var $expander = $('.service-item div > + p + p ');

 $(".service_description").click(function(){
  $(".service_description").css({ "height": "314px"});
  $expander.show();

  $(".service_description").click(function(){
   $expander.toggle();
   $(".service_description").css({ "height": "163px"});
  });

 });

//toggles secondary services' description
  $(".secondary-services-description").hide();

 $("#more_services li").click(function(e){
   e.preventDefault();

      var $this = $(this).parent().find(".secondary-services-description");
      $("#more_services div.secondary-services-description").not($this).hide();
      $this.toggle();
 });

 $("#even_more_services li").click(function(){
  $(".secondary-services-description").toggle();
 });

// toggles the additional secondary services upon view more click 

 $("#view_more").click(function(){
  $("#even_more_services").toggle();
  $(this).html( ($('#view_more').text() == 'View less') ? 'View more' : 'View less' );
 });

 /*$(".service_description").click(function(){
  var $this = $(this);
  $(".service_description" ).css({ "height": "314px"});

  //try to automatically add the full description p

  var $description = $(".service_description p" ).css({ "max-height": "170px"});*/
  // $description.after("<p class=\"full-description\">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>");

 // $(document).click(function(){
 //  var $trigger = $(".service_description");
 //  if($trigger !== event.target && !trigger.has(event.target).length){
 //   $(".full-description").slideUp("fast");
 //  }
 });
```

```css
/**********************************
GENERAL
***********************************/
@font-face {
 font-family: "NeoSans";
 src: url("Neo Sans Std Regular.otf") format('opentype');
}

body {
 background-color: #eff1f1;
 color: cbcbcb;
 font-family: "NeoSans", Arial;
}

/* #blurry{
 position:absolute;
    padding:20px;
    color: transparent;
    text-shadow:0px 0px 0px #000;
} */

#wrapper {
 max-width: 980px;
 margin: 0 auto;
 padding: 0 5%;
}

a {
 text-decoration:  none;
}

/**********************************
COLORS
***********************************/

/* Login text on mobile*/
#login_register{
 background-color: #53b8c4;
 font-weight: normal;
 margin: -5px 0 0;
 text-align: left;
 padding: 10px 0;
 right:0px;
}

.login_color, .login_color a:visited {
 color: #fff;
}

#business {
 background-color: #000;
 display: inline-block;
 margin-bottom: 5px;
 padding: 5px;
}

/**********************************
HEADING
***********************************/

header {
 width: 100%;
 position: relative;
}

#logo {
 text-align: center;
 margin: 0;
 text-transform: uppercase;
}

#logo h1{
 color: #53b8c4;
 margin: 20px 0;
 font-size: 1.5em;
 font-weight: normal;
 line-height: 0.8em;
 padding: 5% 0;
}

#login_register p {
 margin-left: 5px;
 font-size: .6em;
 padding-left: 5px;
 line-height: 50%;
}

.login_color {
 padding: 0 5px;
}

/**********************************
FORM
***********************************/

#form {
 display: none;
 background-color: #fff;
 position: absolute;
 top: 8em;
 right: 4em;
 z-index: 60;
 width: 44%;
    margin: 2%;
    padding: 10px; 
}

#form::after{
 content: "X";
 font-size: 1em;
 background-color: #53b8c4;
 color: #fff;
 position: absolute;
 bottom: -63%;
 right: 2%;
 bottom: -50px;
 padding: 8px;

}

form img {
 position: absolute; 
    top: 30%;
    left: 8%;
}

form input {
 width: 36%;
 margin: 5% 30%;
 padding: 5px;
 display: block;
 background-color: #ccc;
 color: #fff;
 font-size: 0.7em;
}

form input::placeholder {
 color: #fff;
}

/*Internet Explorer*/
form input:-ms-input-placeholder{color: #fff;}

/*Edge, Safari, Opera*/
form input::-webkit-input-placeholder{color: #fff;}

form button {
 position: absolute;
 top: 21%;
 right: 3%;
 background-color: #53b8c4;
 color: #fff;
 font-weight: bold;
 padding: 11px;
 height: 63px;
}

/**********************************
SLIDER CAROUSEL
***********************************/

 .slider{
 max-width: 1000px;
 margin: 0 auto;
 padding: 0;
 position: relative;
} 

.slides {
 display: none;
 position: relative;
 width:100%;
 margin:0 auto;
}

.slides img {
 vertical-align: middle;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.text-office p, .text-floor p {
 position: absolute;
 top: 40%;
 left: 6%;
 color: #fff;
 font-size: 2.2em;
 font-weight: bold;
}

.text-office span, .text-floor span {
 position: absolute;
 left: 41%;
 font-weight: normal;
}

.text-office p::after {
 content: "+";
 background-color: #53b8c4;
 color: #fff;
 font-size: 0.7em;
 /*width: 30px;
 height: 30px;*/
 margin-left: 10px;
 padding: 0 4px;
}

.text-floor p::after {
 content: "+";
 background-color: #53b8c4;
 color: #fff;
 font-size: 0.7em;
 /*width: 30px;
 height: 30px;*/
 margin-left: 10px;
 padding: 0 4px;
}

.slides img {
 max-width: 100%;
 width: 100%;
}

.navigation {
 background-color: #53b8c4;
 color: #fff;
 font-size: 1.4em;
 height: 36px;
 /* max-width: 919px; */
 padding: 3px 0;
 position: relative;
 width:100%;
 margin:0 auto;
}

.navigation a {
 display: inline-block;
 margin: 0 10px;
 cursor: pointer;
}

.navigation a.prev {
 position: absolute;
 left:  5px;  /* 20px for greater width */
}

.navigation a.next {
 position: absolute;
 right: 0;
}

/**********************************
SERVICES
***********************************/

.services {
 list-style: none;
 width: 100%;
 margin-left: 0;
}

 .services li{
  display: flex;
  flex-direction: row;
  /* padding: 2%; */
  width: 100%;   /* 45%; desktop*/ 
  /* margin: 2.5% 2.5% 2.5% -15% ; */
 float: left;   
 background-color: #fff;
 height: 50%;
 margin-bottom:20px;
 margin-left: -36px;
}
 li.service-item:nth-child(2n+1) {
  margin-right: 5px;
 }
 /*li.service-item:nth-child(2n) {
  margin-left: 5px;
 }
 */

.services li p {
 font-size: .69em;
}

.services li p, h3{
 /*padding: 2%;*/
 color: #7d7d7d ;   
}

.number {
 background-color: #53b8c4;
 display: block;
 width: 120px;
 height: 100%;
 float: left;
 text-align: center; 
}

.services .number p {
 font-size: 3em;
 color: #fff;
 margin-top: 31%;
}

.service_description {
 margin-left: 5px;
 position: relative;
 float: right;
 width: 50%; 
}

.service_description p {
 max-width: 87%;
 max-height: 70px;
}

.service_description::after {
 position: absolute;
 top: 39%;
 left: 79%;
 content: "+";
 color: #53b8c4;
 font-size: 2em;
 width: 20%;
 float: right;
 margin-bottom: 50%;
}

.full-description{
 display: none;
}

.active {
 height: 314px;
}

#more_services, #even_more_services {
 list-style: none;
 clear: both;
 width: 100%;
}

#more_services li, #even_more_services li {
 display: inline-block;
 margin: 6%;
 border-bottom: 3px solid #53b8c4;
 max-width: 110px;
}

#more_services li > p {
  display: inline;
}

#even_more_services li a::after {
 content: "+";
 background: #53b8c4;
 width: 100px;
 height: 100px;
 margin-left: 9px;
 padding: 2px;
 color: #fff;
 position: relative;
 left: 1%;
}

/* Adjust the " + " after element for the last 3 descriptions */

#more_services li:nth-last-child(6)::after{
 margin-left: 10px;
}

#more_services li:nth-last-child(4)::after{
 margin-left: 7px;
}

#more_services li:nth-last-child(2)::after{
 margin-left: 5px;
}

#even_more_services li::after {
 content: "+";
 background: #53b8c4;
 width: 100px;
 height: 100px;
 margin-left: 13px;
 padding: 2px;
 color: #fff;
}

/* Adjust the " + " after element for the last 3 descriptions */

#even_more_services li:nth-last-child(6)::after{
 margin-left: 14px;
}

#even_more_services li:nth-last-child(4)::after{
 margin-left: 11px;
}

#even_more_services li:nth-last-child(2)::after{
 margin-left: 9px;
}

.secondary-services-description {
  display: none;
  font-weight: normal;
  font-size: .75em;
  padding: 10px;
  margin-top: -6.2%;
  margin-left: 3%;
  color: #fff;
  background-color: #53b8c4;
  position: relative;
  width: 34.3%;
}

.secondary-services-description p {
 font-size: 11px;
    /*padding: 6px;*/
}

.secondary-services-description p::after {
 display: block;
 content: ">";
 text-align: right;
 color: #fff;
 font-size: 2em;
 position: absolute;
    bottom: -2px;
    right: 3px;
}

#view_more {
 display: block;
 text-align: center;
 color: #53b8c4;
 margin: 20px;
}

#even_more_services {
 display: none;
}

/**********************************
FOOTER
***********************************/

footer {
 font-size: 0.75em;
 text-align: left;
 padding-top: 50px;
 width: 100%;
 /* height: 400px; */
 position: relative;
}

h2#client_article{
 font-size: 1.2em;
 display: inline;
 margin-left: 5px;
 /*margin-bottom: 2em;*/
 position: relative;
 /*top: 41px;*/
}

.footer-navigation {
 display: inline;
 position: relative;
}

.footer-arrows {
    text-align: center;
    /* display: inline-block; */
    position: absolute;
    right: 0; 
 top: 26px;
}

.footer-arrows a {
 display: inline-block;
 width: 40px;
 height: 40px;
 /* margin-bottom: 20em; */
 font-size: 2em;
 color: #fff;
 background-color: #53b8c4;
}

#article {
 background-color: #fff;
 height: 94%;
 width: 100%;
 position: relative;
 overflow:hidden;
}

.triangle-top {
 width: 0;
 height: 0;
 border-right: 20px solid transparent;
 border-left: 45px solid #53b8c4;
 border-bottom: 45px solid transparent;
 position: absolute;
 top: 0;
 left: 0;
}

.triangle-bottom {
 display: none;
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 45px solid #53b8c4;
 border-top: 45px solid transparent;
 position: absolute;
 bottom:  0;
 right: 0;
}

#article h2 {
 padding: 2% 5%;

}

#article p{
 max-height: 10px;
 float: left;
 max-width: 50%;
 max-height: 50%;
 word-break: break-word;
 margin-left: 2.5em;
 margin-top: -54px;
}

.image-container{
 width: 40%;
 float: right;
}

.image-container img {

 max-width: 100%;
 margin: 10% 5px;

}

#read_article {
 color: #53b8c4;
 bottom: 0;
 right: 0;
 position: absolute;
 margin-right: 5px;
 margin-right:9%!important;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>The Business Company</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 <body>
  <header>
   <a href="index.html" id="logo">
    <h1 id="logo"><span id="business">The Business</span> Company</h1>
   </a>
  </header>

  <div class="slider">
   <div id="form">
     <form id="login_form">
      <img src="img/lock.jpg" alt="">
      <input type="email" id="email" placeholder="Your e-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your email'">
      <input type="password" id="password" placeholder="Your password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your password'">
      <button> &#10095; GO</button>
      <!-- the X button for closing the menu -->
     </form>
    </div>
  <div id="login_register">
    <p><span class="login_color"> &#10095; <a href="#login_form"> Login</a></span> or <span class="login_color">Register</span> to enjoy all the benefits of our site !</p>
   </div>
   <!-- Image 1 -->
   <div class="slides fade">
       <img src="img/banner image 1.jpg" alt="Office image 1">
       <div class="text-office">
        <p><span>the</span> <br> OFFICE</p>
        </div>
     </div>
    <!-- Image 2 -->
      <div class="slides fade">
       <img src="img/banner image 2.jpg" alt="Office image 2">
       <div class="text-floor">
        <p><span>the</span> <br> FLOOR</p>
       </div>
     </div>

     <div class="navigation">
    <a class="prev" id="prev_slide" > &#10094;</a>
    <a class="next" id="next_slide"> &#10095;</a>
   </div>
  </div>
  <div id="wrapper">
   <section>
    <ul class="services">
     <li class="service-item"><span class="number"><p>01</p></span>
      <div class="service_description">
       <h3>Our services</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <p class="full-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div> 
     </li>
     <li class="service-item"><span class="number"><p>02</p></span> 
      <div class="service_description">
       <h3>Our rates</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <p class="full-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
     </li>
     <li class="service-item"><span class="number"><p>03</p></span>
      <div class="service_description">
       <h3>Case studies</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <p class="full-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
     </li>
     <li class="service-item"><span class="number"><p>04</p></span>
      <div class="service_description">
       <h3>Get a quote</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
       <p class="full-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
     </li>
    </ul>
    <ul id="more_services">
     <li> <p>Work abo... 

              </p>   </li>

     <li><p>Test text...  </p>  </li>
     <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
     <li><p>Just a sim... </p>  </li>
     <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
     <li><p>Nothing h...  </p> </li>
     <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
    </ul>
    <a href="#more_services" id="view_more">View More</a>
     <ul id="even_more_services">
      <li>
              <a>Work abo... </a>
            </li>
      <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
      <li>Test text...</li>
      <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
      <li>Just a sim...</li>
      <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
      <li>Nothing h...</li>
      <div class="secondary-services-description">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
     </div>
     </ul>
   </section>
  </div>
  <!-- <h2 id="client_article">Article about one client...</h2> -->
   <footer>
    <h2 id="client_article">Article about one client...</h2>
    <div id="article">
     <div class="triangle-top"></div>
     <!-- <div class="footer-navigation"> -->

     <!-- </div> -->
     <div class="image-container">

      <img src="img/image_1_footer.jpg" alt="Office image">
     </div>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Lectus quam id leo in vitae turpis massa sed. </p>
     <div class="triangle-bottom"></div>
     <p id="read_article"> &#10095; Read article</p>

    </div>
    <div class="footer-arrows">
     <a class="prev"> &#10094;</a>
       <a class="next"> &#10095;</a>
    </div>
   </footer>
 <script src="js/script.js"></script>
</body> 
</html>
```

The problem is that all the divs are displaying, not only the one that’s closest to the li that has been clicked on.

Here is the code for my webpage:

```
<ul id="more_services">
                <li>Work abo...   </li>
                <div class="secondary-services-description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
                </div>

```

<https://jsfiddle.net/t63L5py2/47/>

I appreciate any help, thanks!