Id selector not working
I have the following navigation layout:
The outer <dl> is rendered in one file, the inner <ol> in another
I am using php to determine how many <li>s are in each <ol>. If there are more than 6, I add a class "hidden" to each <li> after the 6th and display a "Show All" Link after the last visible <li>. Hitting this link will run some jQuery to remove the hidden class from the <li>s, displaying the full <ol>. While this is generally working, my problem is, that clicking the "Show All" link in let's say the first <ol> will display every hidden <li> and not as intended only the ones in that first <ol>.
So I moved out of that file into the one rendering the outer <dl>. My plan was to give each <dd> a unique id and use that within my js.
I used this code to only affect the <li>s within one <dd>:
And while <?=$filtName?> will output the exact id of that dd element, it will not work - while $("dd").children("ol").children("li.hidden").removeClass("hidden"); is working perfectly, except it will again display all <li>s in all <ol>s.
What am I doing wrong here? Is there maybe an easier approach?
The outer <dl> is rendered in one file, the inner <ol> in another
I am using php to determine how many <li>s are in each <ol>. If there are more than 6, I add a class "hidden" to each <li> after the 6th and display a "Show All" Link after the last visible <li>. Hitting this link will run some jQuery to remove the hidden class from the <li>s, displaying the full <ol>. While this is generally working, my problem is, that clicking the "Show All" link in let's say the first <ol> will display every hidden <li> and not as intended only the ones in that first <ol>.
So I moved out of that file into the one rendering the outer <dl>. My plan was to give each <dd> a unique id and use that within my js.
I used this code to only affect the <li>s within one <dd>:
- <script type="text/javascript">
jQuery(document).ready(function($){
$(".unhide-link").click(function(){
$(".unhide-link").addClass("hidden")
$("#<?=$filtName?>").children("ol").children("li.hidden").removeClass("hidden");
});
});
</script>
And while <?=$filtName?> will output the exact id of that dd element, it will not work - while $("dd").children("ol").children("li.hidden").removeClass("hidden"); is working perfectly, except it will again display all <li>s in all <ol>s.
What am I doing wrong here? Is there maybe an easier approach?