CODEWITHSUNDEEP
jquery
syntax
syntax

Reputation: 585

jquery select child by class, on child-click toggle the parents class

I am trying to select an element by class, and when it is clicked the parent is toggled.

HTML:

`

great-grandparent <div class='section' id='section-18'>
   grandparent       <div class='docs'>
          parent        <div class='octowrap'>
                *          <a class='octothorpe' href='#section-18'>#</a>

`

$('octothorpe').closest('div.section').click(function() {
                    $(".fold").toggle(500);
                      console.log('fold', $('.fold').length);

                });
});

console.log("closest", $('.octothorpe').closest('div.section').length);

`

<style>
.fold {
    display: None;
}
</style>

`

q1 answered <<Neither work, so how do I test that the class element is being selected? Is there a standard console log message I can output? (I tried looking at firefox inspector, but couldnt tell if its getting selected or not. How do I test this straightforward way?(ie without change the color, etc.. just in log?) )>>

Am I chaining functions click and toggle correctly? Only the child can be clicked, (octothorpe is a href), but the parent .section is what needs to be toggle?

for the code below:

console.log. (For test of parents) closest = 1 , never changes.
(For test of fold) fold increments each time clicked. But the toggleClass has no effect even with preventDefault(). Does style display:None not work in this situation?

`

$(function() {
  $(".octothorpe").click(function(e) {
                             e.preventDefault();
                             var sector = $(this).closest("div.section");
                             sector.toggleClass(".fold");
                             //sector.(".fold").toggle();
                             console.log('fold', $('.fold').length);
                         });
  });

console.log("closest", $('.octothorpe').closest('div.section').length);

Hi Thanks to all so far. After some fiddling ive figured I cannot just select the great-grandparent, but the parent sibling and grandparent sibling. If I just select the great-grandparent class then the element itself is essentially lost as I cannot bring it back!

Therefore, I tried the more selective code below. However, neither hide or slideUp/Down as below appear to do anythin. The console.log output shows the fold class incrementing so the elements are being selected.

Whats wrong with this code?

`

$(function(){
  $('.octothorpe').on({
                          click:function(e){
                              e.preventDefault();
                              var pfold =$(this).closest('.octowrap').siblings('p');
                              var cfold =$(this).closest('docs').siblings('.code');
                              $pfold=$(pfold); $cfold=$(cfold);
                              //$pfold.hide();
                              //$cfold.hide();

                              if (!$pfold.hasClass("fold") && !$cfold.hasClass("fold")) {
                                  $cfold.slideUp().addClass('fold');
                                  $pfold.slideUp().addClass('fold');
                                  console.log('fold', $('.fold').length);
                              }
                              else {

                                  cfold.slideDown().removeClass('fold');
                                  pfold.slideDown().removeClass('fold');
                              }    
                          }
                      });

});

`

`

Upvotes: 1

Views: 1500

Answers (3)

MacK
MacK

Reputation: 2181

Assuming you have Sections on one container and the anchors on another container (as it makes sense if you are going to use them like an index / list of content) I would go for this:

$(".octothorpe").click(function(e) {
    e.preventDefault();
    var sectorhash = $(this).attr("href");
    $sector = $(sectorhash);
    if (!$sector.hasClass("fold")) {
        $sector.slideUp().addClass("fold");
    }
    else {
        $sector.slideDown().removeClass("fold"); 
    }
});

Upvotes: 1

peterchon
peterchon

Reputation: 250

You can use the .parent() method.

so consider:

<div class="parent">
  <a href="#" class="child">click me</a>
</div>

js would be:

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().toggle();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.toggle() show/hide the .parent()
    }
  });
});

Now this code is kinda dumb. Since you're hiding the parent, it means you're automatically hiding the child with it. So .toggle() is stupid. A better method would be:

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().hide();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.hide() hide the .parent()
    }
  });
});

Upvotes: 1

Neil S
Neil S

Reputation: 2304

console.log($('.section').length);

will tell you how many elements are being selected. If you want to know if the .fold selector is working, place

console.log($('.fold').length);

in your click function.

Upvotes: 1

Related Questions