Question

….maybe not so simple.

First, I am trying to code this in WordPress, not sure if that has anything to do with it. I want the blog page to show a title for all of the blogs. Then when the user clicks on the blog title the content slides down. The HTML will look like this.

<div id="titel>Title of Post</div>
<div id="meta">Meta data WP adds</div>
<div id="entry">The content of the blog post.</div>

I use a function in the functions.php to autamtically reference jQuery on Google. I’m ussing CSS to hide #entry.

Now when I add my code:

<script type="text/javascript">

    $j=jQuery.noConflict();

    $j(document).ready(function(){

        $j('#title').click(function(){
            $j(this).next('#entry').slideToggle('1000');

        });


    });

</script>

nothing happens. You can click the title but no content. But oddly enough, if you change the code to this:

<script type="text/javascript">

    $j=jQuery.noConflict();

    $j(document).ready(function(){

        $j('#title').click(function(){
            $j('#entry').slideToggle('1000');

        });


    });

</script>

the very first post will get the animation. But shouldn’t it be that (using this second code) that if ANY of the titles are clicked ALL of the #entry are slid down? That is the part that is really throwing my for a loop.

Thanks for all the responses. Here is the exact code as it stands. Here is the HTML:

<div class="article-title"> <h2 class="entry-title"><a  title="Permalink to Similarities" rel="bookmark">Similarities</a></h2></div>

<div class="entry-content"><div class="article-entry"><p><span style="font-size: small;"> HERE IS THE BLOG CONTENT.....

and here is the code as I have it now:

<script type="text/javascript">

    $j=jQuery.noConflict();
    $j(document).ready(function(){
        $('.article-title').click(function(){
            $(this).siblings('.entry-content').slideToggle(1000);
        });
    });

</script>
</head>

Answer 1

First problem: ID’s are unique. There should be only one element per ID.

Second problem: You messed up the name of the ID:

<div id="titel">Title of Post</div>

and

$j('#title').click(function(){

(titel != title)

Third problem: jQuerys next() function accesses the next element, which would be the Meta data in your case.

---

Try something like this:

HTML:

<div class="post">
    <div class="title">Title of Post</div>
    <div class="meta">Meta data WP adds</div>
    <div class="entry">The content of the blog post.</div>
</div>

JS:

<script type="text/javascript">
    $j=jQuery.noConflict();
    $j(document).ready(function(){
        $j('.title').click(function(){
            $j(this).siblings('.entry').slideToggle('1000');
        });
    });
</script>

CSS:

.entry{
    display:none;
}