Noobie question regarding expanding text (access <div> by class)

Noobie question regarding expanding text (access <div> by class)

Hi all,

I've still have little experience handling jQuery. I want to click some header and expand (and collapse) some text. I've already achieved a little example with success:
<html>
    <head>
        <script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>

        <script type="text/javascript">    
            $(function()
            {
                $('h1').click(function() {
                    $(this).next('p').toggle();
                });
            
            });
        </script>
        
    </head>
    
    <body>
        <div>
            <h1>Section 1</h1>
            <p>Section 1 Content</p>
        </div>
        <div>
            <h1>Section 2</h1>
            <p>Section 2 Content</p>
        </div>        
    </body>
    
</html>
Now, I want to apply it to the site I'me developing, and there's where the difficulties begin. I need to access a <cite> tag inside a <div> (instead of <h1>, in the example), and can't seem to do it correctly.

Here's a piece of the HTML I'm trying to change:



 <div class="container">
(...)
      <div class="holder">

            <h1>Program</h1>
       
            <h2>Opening Address</h2>

              <p>Some text</p>

              <cite>Some quote</cite>
Let's say I want to access (expand/collapse) <h2> or <cite>, inside the "holder" <div>, which is itself inside the "container" <div>. How can I access it? Can somebody help me?

Thanks very much,


João