CODEWITHSUNDEEP
javascriptjquerycss
Federico
Federico

Reputation: 1422

Toggle just the previous class

https://jsfiddle.net/4aLzu744/

If you look at this fiddle, I have a menu. If you click on the plus it rotates and becames an x.

What I want to achieve is that if you click on the [ Close ] inside the text, it rotates the x again and close the menu.

I've tried with .closest() and .prev() but it doesn't work.

$('.close').click(function(){
$(this).closest('.plus').toggleClass('rotated');
});

Upvotes: 2

Views: 60

Answers (5)

itzmukeshy7
itzmukeshy7

Reputation: 2678

Try this ;)

$(".plus").click(function() {
  $(this).next('.singleproject').toggle();
  $(this).toggleClass('rotated');
});

$(".close").click(function() {
  $(this).closest('.project').find('.plus').trigger('click');
});
.titolo,
    .plus {
      float: left;
      font-size: 18px;
    }
    
    .plus {
      -webkit-transition: all .2s ease-in;
      -moz-transition: all .2s ease-in;
      -o-transition: all .2s ease-in;
      transition: all .2s ease-in;
      float: right;
      cursor: pointer;
    }
    
    .project {
      padding-bottom: 40px;
      margin-bottom: 20px;
      border-bottom: 2px solid black;
    }
    
    .rotated {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .singleproject {
      display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

Upvotes: 0

guradio
guradio

Reputation: 15565

$('.close').click(function() {
  $(this).closest('.project').find('.plus').toggleClass('rotated');
});

Use closest to find the parent class project from there find the class plus

demo

Upvotes: 0

cl3m
cl3m

Reputation: 2801

You have to take the parent singleproject, and then find the corresponding plus inside:

$(".close").click(function() {
  $(this).parent('.singleproject').toggle();
    $(this).closest('.project').find('.plus').toggleClass('rotated');
});

Upvotes: 0

BenG
BenG

Reputation: 15164

.plus is a sibling of the parent, so you will need to go up one more then find

$('.close').click(function(){
   $(this).closest('.project').find('.plus').toggleClass('rotated');
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

closest() is used to find a matching ancestor element, here plus is not an ancestor of the close but a sibling of another ancestor element.

You can to find the plus in the same `project element so

$(this).closest('.project').find('.plus').toggleClass('rotated');


$(".singleproject").hide();
$(".plus").click(function() {
  $(this).next('.singleproject').toggle();
});

$(".singleproject").hide();
$(".close").click(function() {
  $(this).parent('.singleproject').toggle();
});

$('.plus').click(function() {
  $(this).toggleClass('rotated');
});

$('.close').click(function() {
  $(this).closest('.project').find('.plus').toggleClass('rotated');
});
.titolo,
.plus {
  float: left;
  font-size: 18px;
}
.plus {
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  float: right;
  cursor: pointer;
}
.project {
  padding-bottom: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid black;
}
.rotated {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

Upvotes: 1

Related Questions