Hide data using Jquery

Question

I have five button which contain different data

$(".Datanewpost").click(function() {
  $(".data).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <div id="Datanewpost">
    Data 1
    <div class="data"> Helol</div>
  </diV>
  <div id="Datanewpost">
    data 2
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 3
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
</div>

Unfortunately this does not work what do I need to do to get what I want? I know I can do it by assigning individual id to each div but that looks bad coding

NOTE: I want to be able to hide or show individually ,

Your divs all have the same id. ids have to be unique. And the selector you use looks at the class Datanewpost , where no element has that class. So instead of using the same id for every post, use the same class. — Shilly
– Shilly, Commented Sep 19, 2018 at 14:41
syntax error in $(".data).toggle; should be $(".data").toggle() — mtizziani
– mtizziani, Commented Sep 19, 2018 at 14:46
You have two very obvious issues. Firstly you're missing the closing " in the selector in the jQuery object and the repeated id needs to be changed to a class. — Rory McCrossan
– Rory McCrossan, Commented Sep 19, 2018 at 14:52

Mamun · Accepted Answer · 2018-09-19 17:16:53Z

1

Id should be unique in a document, use class instead. You can use $(this).find('.data') to toggle the specific element:

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
});

.data{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>

As in comment, you have asked to close the open div when clicking another, simply loop through all the .data except the current one. Then check display='block' property to set that to display='none':

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
  var current = $(this).find('.data');
  $('.data').not(current).each(function(i, el){
    if(this.style.display=='block')
      this.style.display = 'none';
  });
});

.data{
  color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>

edited Sep 19, 2018 at 17:16

answered Sep 19, 2018 at 14:43

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

The Dead Man Over a year ago

I want to be able to hide or show individual , like when u click one button does not affext other button ,

Mamun Over a year ago

@user9964622, current solution is doing the exact. When you click Data1, it only hide, show the next hello to it...........same goes for all........thanks

The Dead Man Over a year ago

I tried but it hide all helo check here jsfiddle.net/yjs7nbov/2

Mamun Over a year ago

@user9964622, there is something wrong with the HTML, I have used from my answer and is working nicely......thanks

Mamun Over a year ago

@user9964622, I have got the issue of why the code in the fiddle not working as expected.....you have one </diV> (capital V). Should be </div>

|

Omid Nikrah · Accepted Answer · 2018-09-19 14:54:43Z

1

When you have multiple same elements, you should use a class instead of id like the following:

$(".Datanewpost").click(function () {
  $(this).find(".data").toggle();
});

.Datanewpost {
  padding: 10px;
  background-color: #f7f7f7;
  margin: 5px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
  <div class="Datanewpost">
    Data 1
    <div class="data"> Helol</div>
  </diV>
  <div class="Datanewpost">
    data 2
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 3
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
</div>

edited Sep 19, 2018 at 14:54

answered Sep 19, 2018 at 14:44

Omid Nikrah

2,4803 gold badges17 silver badges31 bronze badges

2 Comments

The Dead Man Over a year ago

Hii , does this hide each element indiviadual ?

Omid Nikrah Over a year ago

@user9964622 hi, yes

Rajeev · Accepted Answer · 2018-09-19 15:19:55Z

1

You can use like this:

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();

});

answered Sep 19, 2018 at 15:19

Rajeev

3594 silver badges7 bronze badges

2 Comments

The Dead Man Over a year ago

will this hide indivudual ? when u click first button it should hide or show only its data not all

Rajeev Over a year ago

Yes will this hide individual.

Collectives™ on Stack Overflow

Hide data using Jquery

3 Answers 3

11 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related