Selector issue:
Selector issue:
I have search online all over for this and no solution so here goes:
How to i select an element whose IS is taken from the link url of the clicked element:
-
<!-- POST BODY -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<span id="post-excerpt-<?php the_ID(); ?>" class="post-excerpt"><?php the_excerpt(); ?></span>
<span id="post-content-<?php the_ID(); ?>" class="post-content"><?php the_content(); ?></span>
<!-- READ MORE BAR STARTS -->
<div class="read-more-bar">
<a href="#post-content-<?php the_ID(); ?>" class="read-more" id="read-more-<?php the_ID(); ?>">Read More</a>
<a href="#post-excerpt-<?php the_ID(); ?>" class="read-less" id="read-less-<?php the_ID(); ?>">Read Less</a>
<div class="comment-bubble"><?php comments_popup_link('0', '1', '%','', ''); ?></div>
</div>
You will see that each read-more link has the href '#post-content-id' ...i want to show the span whose id is 'post-content-id' on click, and reverse the effect when you click on the read-less.
I just do not know how to specifically select the sapn based on the id, not the class as there are more than one intsance of this code on the page (each with same classes, different id's on the id.)
I have this jquery which controls ALL of the content/excerpt divs, not the one in quesiton:
-
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a.read-more').click(function(){
jQuery('.post-excerpt').fadeOut();
jQuery(this).fadeOut();
jQuery('.post-content').show('slow');
jQuery('.read-less').fadeIn();
});
jQuery('a.read-less').click(function(){
jQuery('.post-content').hide();
jQuery(this).fadeOut();
jQuery('.post-excerpt').show('slow');
jQuery('.read-more').fadeIn();
})
});
</script>
Any help would be greatly appreciated.
Thanks,