Wordpress Single.php Just want hide the content & call it when someone clicks button

Hey Guys

This is my single.php file

<?php get_header(); ?>

<!-- Left // -->
<div class="left">

<!-- Article // -->

<div class="articles article">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="ainfo">
<div class="infol">
<div class="avatar"><a><?php echo get_avatar( get_the_author_email(), '75', $default=''. get_bloginfo('stylesheet_directory') .'/img/avatar.jpg' ); ?></a></div>
<span class="author"><?php the_author_posts_link() ?></span>
</div>
<ul>
<li><a href="#comments"><?php comments_number(__('0'), __('1'), __('%')); ?> Comments</a></li>
<li><a href="#respond">Leave a Comment</a></li>
<li><a href="javascript:bookmark('<?php the_permalink(); ?>','<?php the_title_attribute(); ?>');">Bookmark This</a></li>
<li><a href="<?php the_permalink(); ?>">Permalink</a></li>
</ul>

<?php include ('editable/ads/post-top.php'); ?>

<div class="clear"></div>
</div>
<a class="title" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<div class="post">
<div class="postright">
<?php if(has_tag('review')&&defined("STARRATING_INSTALLED")) : ?>
<div class="score">
<span style="float:right;">
<?php wp_gdsr_show_article_review(); ?>
</span>
Review Score:
</div>
<?php endif; ?>
<?php if(get_post_meta($post->ID, "thumbnail", true)) : ?>
<img class="thumbnail" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" />
<?php endif; ?>
</div>
<span class="post-date"><?php the_time('F jS, Y \a\t g:i a') ?> - </span>
<?php the_content(); ?>
</div>
<div class="atabs">
<ul class="tabs">
<li><a href="#" class="active" rel="#atabs_similar">Similar Posts</a></li>
<li><a href="#" rel="#atabs_categories">Categories</a></li>
<li><a href="#" rel="#atabs_tags">Tags</a></li>
</ul>
<div class="atabs_content" id="atabs_content">
<div class="similarposts">
<?php if(function_exists('similar_posts')) : ?>
<?php similar_posts(); ?>
<?php else: ?>
Similar posts plugin not found.
<?php endif; ?>
</div>
</div>
<div id="atabs_similar" class="hidden">
<div class="similarposts">
<?php if(function_exists('similar_posts')) : ?>
<?php similar_posts(); ?>
<?php else: ?>
Similar posts plugin not found.
<?php endif; ?>
</div>
</div>
<div id="atabs_tags" class="hidden">
<div class="tags">
Tags: <?php the_tags('','',''); ?>
</div>
</div>
<div id="atabs_categories" class="hidden">
<div class="categories">
Categorized Under: <?php the_category(', ') ?>
</div>
</div>
</div>

<?php include ('editable/ads/post.php'); ?>

<div class="clear"></div>

<?php edit_post_link('Edit this entry.', '<p style="border-top:1px dotted #999;padding-top:6px;margin-top:10px;">', '</p>'); ?>
</div>

<!-- // Article -->

<!-- Comments // -->
<?php comments_template(); ?>
<!-- // Comments -->
<div class="wpn_clear"></div>

<?php endwhile; ?>
<?php else : ?>
<?php include ('editable/404/404-error.php'); ?>
<?php endif; ?>
</div>
<!-- // Left -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>






Now I want something like I just hide the content of my posts.. [<?php the_content(); ?>]

and call the content, I mean it should be appear after someone clicks the button that I add through onclick function or something like that.

I tried that with some of the codes but they always disturbs all the setting of my post. Like similar pos gets up, and category section goes down and other stuffs.

Please if someone can help me. I really need this help as soon as I can.

Waiting for someone's reply.

Thanks guys to read.

 

I also want the Same Thing in My wordpress website Hide All the content and then show a button in that post when someone clicks on it it will reveal the entire content of the post again - Hope someone answer this question soon

 

have a look at this:

http://www.cssnewbie.com/showhide-content-css-javascript/