php hide a dynamically constructed element

Question

i have an ul with some li something like this

<?php
   for($i=0; $i<5; i++) { 
      $id_name = "link" . $i;
      echo "<ul><a href='#' id=$id_name >list</a>
               <li class='on'>1</li>
               <li class='on'>2</li>
               <li class='on'>3</li>
            </ul> ";
    }
?>

and css :

.off{display:none;} .on{display:block;}

I want every time I click a link to hide all li elements of this link. I tried jQuery with toggleClass() function but I can't do nothing is I don't know the id of the link. I read something about child() and parent() functions. Can I use this way? (sorry for the programming mistakes i am new to php)

The only valid children of <ul> tags are <li> tags ... I'd fix the HTML first then work on the JavaScript (as the structure will be different)... — CD001
– CD001, Commented Dec 9, 2015 at 9:00

Norlihazmey Ghazali · Accepted Answer · 2015-12-09 09:14:04Z

2

Why not giving a link tag some class name as example myLink, like following code :

echo "<ul><a href='#' id=$id_name class='myLink'>list</a>
           <li class='on'>1</li>
           <li class='on'>2</li>
           <li class='on'>3</li>
        </ul>

And later on in jquery you can target myLink class name and use .siblings() as A tag are siblings of li element.Thus no need for .child() or .parent(). See following code :

$(document).on('click', '.myLink', function () {
  $(this).siblings().toggleClass('off');
});

One thing to consider, if you defined already on class name on li element, using toggleClass('off') would only add and remove off class name but not the on class name. To get desire result, use this css :

.off {
  display:none !important;
}

DEMO

p/s : A tag should not be there as it not a valid markup for UL

edited Dec 9, 2015 at 9:14

answered Dec 9, 2015 at 8:56

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

1 Comment

Norlihazmey Ghazali Over a year ago

Yeah, as worst HTML structured would broken jquery code.

madalinivascu · Accepted Answer · 2015-12-09 08:57:37Z

1

Try:

$('a').click(function(){
 $(this).parent().find('li').toggleClass('off');
});

or :

 $('a').click(function(){
     $(this).parent().children('li').toggleClass('off');
    });

or:

$('a').click(function(e){
  e.preventDefault();
     $(this).nextAll('li').toggleClass('off');
    });

edited Dec 9, 2015 at 8:57

answered Dec 9, 2015 at 8:55

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

1 Comment

CD001 Over a year ago

Think you might want $(this).parent().find() ... ? Though, admittedly the HTML is badly structured.

DvideBy0 · Accepted Answer · 2015-12-09 09:03:02Z

1

If you are using jquery you can just add a function in your html. No need to have a class for hiding and showing (unless you are applying animations or something to your css classes). As mentioned by another user, you should remove the anchor from your list and place it outside or as a list item itself.

$(document).ready(function() {
  $('a').click(function() {
    $(this).parent().children('li').toggle();
  });
});

edited Dec 9, 2015 at 9:03

answered Dec 9, 2015 at 8:57

DvideBy0

6882 gold badges13 silver badges27 bronze badges

Collectives™ on Stack Overflow

php hide a dynamically constructed element

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related