neptuna on "JQuery Accordion wtih posts"

Hi,

I am new to Wordpress and I don't know any programming language. I am trying to add accordion effect to my posts on category pages.

I add the following code:

function my_scripts_method() {
    if ( !is_admin() ) {
        wp_enqueue_script('jquery-ui-accordion');
        wp_enqueue_script(
            'custom-accordion',
        get_template_directory_uri() . '/js/accordion.js',
        array('jquery')
    );
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

into the function.php and then create a .js file

jQuery(document).ready(function($) {
    $( "#accordion" ).accordion({
        collapsible: true,
                active: false
    });
});

then I edit the post.php

<div class="wrap">

		<?php if ( is_single( get_the_ID() ) ) : // If viewing a single post. ?>

			<header class="entry-header">

				<h1 <?php hybrid_attr( 'entry-title' ); ?>><?php single_post_title(); ?></h1>

				<div class="entry-byline">
					<?php hybrid_post_author( array( 'text' => __( 'Written by %s', 'saga' ) ) ); ?>
				</div><!-- .entry-byline -->

			</header><!-- .entry-header -->

			<div <?php hybrid_attr( 'entry-content' ); ?>>
				<?php the_content(); ?>
				<?php wp_link_pages(); ?>
			</div><!-- .entry-content -->

			<footer class="entry-footer">
				<?php hybrid_post_terms( array( 'taxonomy' => 'category' ) ); ?>
				<?php hybrid_post_terms( array( 'taxonomy' => 'post_tag', 'before' => sprintf( '<span class="sep">%s</span> ', _x( '&middot;', 'post meta separator', 'saga' ) ) ) ); ?>
			</footer><!-- .entry-footer -->

		<?php else : // If not viewing a single post. ?>

			<header class="entry-header">

				<?php the_title( '<h2 ' . hybrid_get_attr( 'entry-title' ) . '><a href="' . get_permalink() . '" rel="bookmark" itemprop="url">', '</a></h2>' ); ?>

				<div class="entry-byline">
					<time <?php hybrid_attr( 'entry-published' ); ?>><?php echo get_the_date(); ?></time>
					<span class="sep"><?php _ex( '&middot;', 'post meta separator', 'saga' ); ?></span>
					<?php comments_popup_link( false, false, false, 'comments-link' ); ?>
				</div><!-- .entry-byline -->

			</header><!-- .entry-header -->

			<div <?php hybrid_attr( 'entry-summary' ); ?>>
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->

		<?php endif; // End single post check. ?>

	</div><!-- .wrap -->

</article><!-- .entry -->

I think that the post.php code checks if there is single post or not and if it is single it shows the full text and if there are multiple posts it shows them partially.

I want it to show the multiple posts with accordion effect so I add

<div id="accordion"> code </div> just after <?php else : // If not viewing a single post. ?>

The problem is that it applies the accordion effect only the first post and the rest are not affected. I tried to place the div part to different sections but no luck. I can not get into the loop.
If I add the <div id="accordion"> code </div> to whole post.php it adds the accordion to the single posts as well but still only to the first post.

I am not a native so I hope I could express myself clearly.
Any help would be appreciated.