user5745970 user5745970 - 5 months ago 28
Javascript Question

jQuery to not perform function on child click but perform on parent

I am trying to make a FAQ and I make a list of block and when
< li> is clicked it's child expands and when again < li> is clicked will close . Everything is working fine but when I also click on it still closing it.

I want only when box was clicked is clicked it will open his child "reveal" only and when it click again, it will hide "reveal"

My jQuery is:

$(".toggle").click(function(){
$(this).find('.reveal').addClass('open').slideToggle();
return false;
});


I been 1 hour, I searched stackflow, and one said to use "return false;"; but it doesn't do anything. What am I doing wrong?
and here's the demo at the list of boxes:
demo



$(".toggle").click(function() {
$(this).find('.reveal').addClass('open').slideToggle();

});

ol {
display: block;
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(61, 70, 77, 0.1);
}

ol li {
display: block;
width: 100%;
min-height: 80px;
border-bottom: 1px solid #e9eaec
}

ol li .shown {
width: 100%;
position: relative;
}

ol li .shown * {
float: left;
line-height: 80px;
height: 80px;
}

ol li .number {
width: 8%;
position: relative;
float: left;
display: block;
}

ol li .number span {
background-color: #F29898;
display: block;
position: absolute;
line-height: 0px;
border-radius: 50px;
padding: 15px 8px;
font-weight: 800;
color: #fff;
font-size: 21px;
top: 25px;
left: -15px;
height: 30px;
width: 30px;
display: block;
}

ol li .name {
width: 52%;
line-height: 80px;
height: 80px;
float: left;
}

.detailed ol li .name {
margin-left: 10%;
}

ol li .name span {
font-size: 26px;
font-weight: 800;
color: #F29898;
}

ol li .rating {
width: 20%;
}

ol li .rating span {
font-size: 18px;
font-weight: 800;
color: #F29898;
opacity: .8;
}

ol li .goto {
width: 20%;
}

ol li .goto .btn {
line-height: 40px;
height: 40px;
text-align: center;
padding: 0 24px;
margin-top: 20px;
}

ol li .reveal {
display: none;
width: 90%;
margin: 0 auto;
padding: 0 0 20px 0;
position: relative;
line-height: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li class="toggle">
<div class="shown">
<div class="number">
<span>4</span>
</div>
<div class="name">
<span>GoDaddy</span>
</div>
<div class="rating">
<span>8.5/10</span>
</div>
<div class="goto">
<a class="btn">Visit</a>
</div>
</div>
<div class="reveal" id="four-reveal">
<p>We personally love GoDaddy but <u>their are many mix reviews about the company hosting services</u>. Some love them, some don't. But GoDaddy doesn't get so big by accident, they have more than 14 million customers. We personally host our clients
websites on GoDaddy;</p>
<p>GoDaddy shared hosting plan offers <b>uptime of 99.9% guarantee</b>, with <b>24/7 support via phone and email or Fourm</b>; and We can tell you one thing sure, their <b>Support is the best</b>. </p>
</div>
</li>
</ol>




Answer Source

So instead of firing an event on li, try fire it on shown. check the below code:

$(".toggle .shown").click(function() {
  $(this).parent().find('.reveal').addClass('open').slideToggle();

});
ol {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(61, 70, 77, 0.1);
}

ol li {
  display: block;
  width: 100%;
  min-height: 80px;
  border-bottom: 1px solid #e9eaec
}

ol li .shown {
  width: 100%;
  position: relative;
  z-index: 9999;
}

ol li .shown * {
  float: left;
  line-height: 80px;
  height: 80px;
}

ol li .number {
  width: 8%;
  position: relative;
  float: left;
  display: block;
}

ol li .number span {
  background-color: #F29898;
  display: block;
  position: absolute;
  line-height: 0px;
  border-radius: 50px;
  padding: 15px 8px;
  font-weight: 800;
  color: #fff;
  font-size: 21px;
  top: 25px;
  left: -15px;
  height: 30px;
  width: 30px;
  display: block;
}

ol li .name {
  width: 52%;
  line-height: 80px;
  height: 80px;
  float: left;
}

.detailed ol li .name {
  margin-left: 10%;
}

ol li .name span {
  font-size: 26px;
  font-weight: 800;
  color: #F29898;
}

ol li .rating {
  width: 20%;
}

ol li .rating span {
  font-size: 18px;
  font-weight: 800;
  color: #F29898;
  opacity: .8;
}

ol li .goto {
  width: 20%;
}

ol li .goto .btn {
  line-height: 40px;
  height: 40px;
  text-align: center;
  padding: 0 24px;
  margin-top: 20px;
}

ol li .reveal {
  display: none;
  width: 90%;
  margin: 0 auto;
  padding: 0 0 20px 0;
  position: relative;
  line-height: 1;
}

ol li .reveal .btn {
  width: 200px;
  text-align: center;
  line-height: 20px;
  height: 40px;
  display: inline-block;
}

ol li.email {
  text-align: center;
}

ol li.email input {
  width: 70%;
  padding: 0 10px;
  border-color: #F29898;
}

ol li.email button {
  width: 20%;
  padding: 10px auto;
  border: 2px solid #F29898;
  background-color: #F29898;
  font-size: 15px;
  height: 23px;
  color: #fff;
  font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li class="toggle">
    <div class="shown">
      <div class="number">
        <span>4</span>
      </div>
      <div class="name">
        <span>GoDaddy</span>
      </div>
      <div class="rating">
        <span>8.5/10</span>
      </div>
      <div class="goto">
        <a class="btn">Visit</a>
      </div>
    </div>
    <div class="reveal" id="four-reveal">
      <p>We personally love GoDaddy but <u>their are many mix reviews about the company hosting services</u>. Some love them, some don't. But GoDaddy doesn't get so big by accident, they have more than 14 million customers. We personally host our clients
        websites on GoDaddy;</p>
      <p>GoDaddy shared hosting plan offers <b>uptime of 99.9% guarantee</b>, with <b>24/7 support via phone and email or Fourm</b>; and We can tell you one thing sure, their <b>Support is the best</b>. </p>
    </div>
  </li>
</ol>