CODEWITHSUNDEEP
jqueryhtmlcss
Timilehin Osaze Adegbulugbe
Timilehin Osaze Adegbulugbe

Reputation: 63

Select only clicked li using jQuery

I want to display the clicked ul, not every ul. The ul has the class slide-in.

I would appreciate it a lot if anyone could help me, because I am stuck.

My code is below for you to check it out:

$('.gallery li.slide-in').on("click", function() {
  var ele = $('.icon-to-change');
  $(this).slideToggle();
  if (ele.hasClass('fa-plus')) {
    ele.removeClass('fa-plus')
      .addClass('fa-minus');
  } else {
    ele.addClass('fa-plus')
      .removeClass('fa-minus');
  }
});
.row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <title>New File</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="coll">
      <div class="col-lg-3 col-md-3">
        <ul class="gallery">
          <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a></li>
          <ul class="slide-in">
            <li><a href="">maize sheller</a></li>
            <li><a href="">locust bean dehuller</a></li>
            <li><a href="">fish smoker</a></li>
            <li><a href="">four row multi grain planter</a></li>
            <li><a href="">grain dryer</a></li>
            <li><a href="">pop corn machine</a></li>
            <li><a href="">palm oil processing machine</a></li>
            <li><a href="">soybean thresher</a></li>
          </ul>
          <li><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a></li>
          <ul class="slide-in">
            <li><a href="">maize sheller</a></li>
            <li><a href="">locust bean dehuller</a></li>
            <li><a href="">fish smoker</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 230

Answers (4)

Reeya Poddar
Reeya Poddar

Reputation: 1

Please modify your code as below. 1) Update jQuery 2) Move .slide-in in its above 

  • $('.gallery li').click(function() {

  if ($(this).hasClass('open')) {
    $(this).removeClass('open');
    $(this).find('.slide-in').slideUp();
  } else {
    $(this).siblings().removeClass('open').find('.slide-in').slideUp();
    $(this).addClass('open');
    $(this).find('.slide-in').slideDown();
  }
});
    .row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <title>New File</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="coll">
      <div class="col-lg-3 col-md-3">
        <ul class="gallery">
          <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
            <ul class="slide-in">
              <li><a href="">maize sheller</a></li>
              <li><a href="">locust bean dehuller</a></li>
              <li><a href="">fish smoker</a></li>
              <li><a href="">four row multi grain planter</a></li>
              <li><a href="">grain dryer</a></li>
              <li><a href="">pop corn machine</a></li>
              <li><a href="">palm oil processing machine</a></li>
              <li><a href="">soybean thresher</a></li>
            </ul>
          </li>
          <li><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
            <ul class="slide-in">
              <li><a href="">maize sheller</a></li>
              <li><a href="">locust bean dehuller</a></li>
              <li><a href="">fish smoker</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

    Upvotes: 0

    • Micka&#235;l Leger
    Micka&#235;l Leger

    Reputation: 3440

    I change your html a little + the jQuery part, here is a snipper to test it :

    // I add a class `activate-slide` on your li
$('.gallery li.activate-slide').on("click", function() {
  var ele = $(this).find('.icon-to-change');
  $(this).find(".slide-in").slideToggle();
  if (ele.hasClass('fa-plus')) {
    ele.removeClass('fa-plus')
      .addClass('fa-minus');
  } else {
    ele.addClass('fa-plus')
      .removeClass('fa-minus');
  }
});
    .row .gallery  {
    list-style-type: none;
    margin-left: 0px;
    margin-top: 50px;
    padding: 0;
    width: 100%;
    background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
    display: block;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Bree Serif', serif;
}
.slide-in {
    list-style-type: none;
    display:none;
}
.fa-plus, .fa-minus {
    float:right;
    position: relative;
    top: 2px;
}
.gallery li a:hover {
    background-color: #8080ff;
    color: white;
}
.gallery li a.header, .gallery li a.header:hover{
    background-color: rgba(9, 17, 25, 1); 
    color:white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>New File</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="row"> 
        <div class="coll">
            <div class="col-lg-3 col-md-3">
                <ul class="gallery">
                    <!-- I add the class `activate-slide` and end the li after the `ul.slide-in`-->
                    <li class="activate-slide"><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
                        <ul class="slide-in">
                            <li><a href="">maize sheller</a></li>
                            <li><a href="">locust bean dehuller</a></li>
                            <li><a href="">fish smoker</a></li>
                            <li><a href="">four row multi grain planter</a></li>
                            <li><a href="">grain dryer</a></li>
                            <li><a href="">pop corn machine</a></li>
                            <li><a href="">palm oil processing machine</a></li> 
                            <li><a href="">soybean thresher</a></li>
                        </ul>
                    </li> <!-- end of `li.activate-slide`-->
                    <!-- I add the class `activate-slide` and end the li after the `ul.slide-in`-->
                    <li class="activate-slide"><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
                        <ul class="slide-in">
                            <li><a href="">maize sheller</a></li>
                            <li><a href="">locust bean dehuller</a></li>
                            <li><a href="">fish smoker</a></li>
                        </ul>
                    </li> <!-- end of `li.activate-slide`-->
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

    Is it what you are looking for?

    Upvotes: 1

    Alpesh Jikadra
    Alpesh Jikadra

    Reputation: 1722

    Your code should be like as follow,

    Your HTML was not correct

    Your event should be bind to .header class

     

    $(document).ready(function(){
  
	$('.header').click(function() {
	  var ele = $(this).children('.icon-to-change');
	  //$(this).slideToggle();
	  $(this).parent().children("ul").slideToggle();
	  if (ele.hasClass('fa-plus')) {
		ele.removeClass('fa-plus').addClass('fa-minus');
	  } else {
		ele.addClass('fa-plus').removeClass('fa-minus');
	  }
	});
	
  });
    .row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html>

    <head>

      <title>New File</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>

    <body>
      <div class="row">
        <div class="coll">
          <div class="col-lg-3 col-md-3">
            <ul class="gallery">
              <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
              <ul class="slide-in">
                <li><a href="">maize sheller</a></li>
                <li><a href="">locust bean dehuller</a></li>
                <li><a href="">fish smoker</a></li>
                <li><a href="">four row multi grain planter</a></li>
                <li><a href="">grain dryer</a></li>
                <li><a href="">pop corn machine</a></li>
                <li><a href="">palm oil processing machine</a></li>
                <li><a href="">soybean thresher</a></li>
              </ul>
</li>
              <li>
<a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
              <ul class="slide-in">
                <li><a href="">maize sheller</a></li>
                <li><a href="">locust bean dehuller</a></li>
                <li><a href="">fish smoker</a></li>
              </ul>
</li>
            </ul>
          </div>
        </div>
      </div>
    </body>

    </html>

    Upvotes: 0

    PPL
    PPL

    Reputation: 6555

    You should try this

    $('.gallery > li').on("click",function(){
            var ele = $('.icon-to-change');
              if($(this).children().children().hasClass('fa-plus')){
                $(this).next('.slide-in').slideToggle();
                ele.removeClass('fa-plus')
                   .addClass('fa-minus');
              }
              else{
                $(this).next('.slide-in').slideToggle();
                ele.addClass('fa-plus')
                   .removeClass('fa-minus');
              }
        })

    Upvotes: 0

    Related Questions