> $(this).children('span a').click(function()
This is not allowed, you can only select the immediate children, so
you have to do it twice I guess. I am not sure if there is a better
way. Also I used toggle function instead of click, that lets you run 2
functions alternatively. Also using next instead of siblings.
Here is my code
$(document).ready(function()
{
$('h4.filteredResultsTitle').each(function()
{
$(this).append(' <span class="show">(<a href="#">show</a>)</
span>');
$(this).next('ul').hide();
$(this).children('span').children('a').toggle(
function()
{
$(this).parent().parent().next('ul').show();
$(this).text('hide');
return false;
},
function()
{
$(this).parent().parent().next('ul').hide();
$(this).text('show');
return false;
}
);
});
On Dec 11, 8:53 am, "sironf...@msn.com" <sironf...@msn.com> wrote:
> I have the follow HTML markup
>
> <h4 class="filteredResultsTitle">Information Sources</h4>
> <ul style="display: block;">
> <li>...</li>
> <li>...</li>
> <li>...</li>
> </ul>
>
> I'm trying to create show/hide buttons against the 'Information
> Sources' <h4> element to toggle the <ul> element to disappear/
> reappear. So far I have the following jquery....
>
> $(document).ready(function()
> {
> $('h4.filteredResultsTitle').each(function()
> {
> $(this).append(' <span class="show">(<a href="#">show</a>)</
> span>');
>
> $(this).siblings('ul').hide();
>
> $(this).children('span a').click(function()
> {
> $(this).parent().parent().siblings('ul').show();
> $(this).text('hide');
>
> return false;
> });
> });
>
> });
>
> This doesn't seem to work though. However, if I change $(this).parent
> ().parent().siblings('ul').show(); into $(this).parent().siblings
> ('ul').show(); (remove a call the .parent() ) it does work, but surely
> this is incorrent as the markup is...
>
> <h4>Title <span class="show">(<a href="#">show</a>)</span></h4>
>
> ...and the parent of <a> is <span> and the parent of <span> is <h4>,
> yet it seems to jump straight from <a> to <h4> missing out the <span>
> when I remove a call to .parent(). What's more my click event is
> getting applied to the <span> and not the <a> as $(this).text('hide')
> causes the brackets and the <a>show</a> to be completely replaced.
>
> I remember a work colleague telling me that JQuery does have problems
> trying to select on elements that have been dynamically created (such
> as when using .append() in my case). Is this a know issue with JQuery,
> or am I totally doing something wrong.
>
> Cheers!
