How to Toggle post content within a “post” title in a page?

3 comments

1. It sounds like you’re describing an accordion function. WordPress offers a bunch of accordion plugins. Here are a few:
   http://wordpress.org/plugins/tags/accordion

   If you’re looking for something with a little more control you might want to look straight into the jquery accordion widget. See information here: http://jqueryui.com/accordion/

   EDIT

   To add the accordion plugin to your list, you’ll need to apply the following changes. Add the following to your head tag:

   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   

   In your wp-archives plugin modify the following line:

   echo "<div class='list'><ul>n";
   

   to this:

   echo "<div class='list'><ul id="unique_id_of_your_choice">n";
   

   As for the content that should follow each post title, You will need to update the plugin once again to include the archive post content(either the entire post or a snippet, whichever you choose). It should look something like this if the database field holding the content were named “post_content”.

   $arcresults2 = $wpdb->get_results("SELECT ID, post_date, post_title, post_content, comment_status FROM " . $wpdb-> posts . " WHERE post_date LIKE '$thisyear-$thismonth-%' AND $current_posts AND post_status='publish' AND post_password='' ORDER BY post_date DESC");
   ...
   
   ...
   $arc_title = $arcresult2->post_title;
   $arc_content = $arcresult2->post_content;
   ...
   
   ...
   echo "<li class='list'><a href="" . $url . "" title="" . $title_text . "">" . wptexturize($text) .  "</a>n";
   echo"<ul><li>".$arc_content."</li></ul></li>n";
   

   Log in to Reply

2. This is possible with an accordion script like jQueryUI Accordion, but if you want to apply this to your posts page, you will also have to edit your page template.

   Here is one simple method (see source):

   ---

   1) Add the following to your theme’s functions.php

   function add_accordion_script() {
     wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
   }
   add_action('wp_enqueue_scripts', 'add_accordion_script');
   

   2) Create acc.js in your themes directory thus:

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

   3) Finally modify your theme page to something like this:

   <?php if (have_posts()): ?>
       <div id="accordion">
       <?php while (have_posts()) : the_post();?>
           <div class="accordion-header">
               <h1><?php the_title();?></h1>
               <?php the_excerpt();?>
           </div>
       <div><?php the_content();?></div>
       <?php endwhile; ?>
       </div>
   <?php else:?>
       <p><?php _e('No posts'); ?></p>
   <?php endif;?>
   

   ---

   Depending on your wordpress template this may be more complicated to implement than is outlined above… in which case you’d have to provide more information.

   Another alternative would be to use some sort of plugin specifically designed for this purpose. I found three that might work for you, but they do not seem to be well supported/maintained… so the above method may still be your best option:

   1. WordPress jQuery Accordion Plugin
   2. WP Post Accordion
   3. Read More Right Here Plugin

   Log in to Reply

3. Collapse-O-Matic Plugin for wordpress is another alternative for this which is working like a charm for my website but only if I’m changing it to default theme of WordPress :(. Seems like there is any glitch in my theme. Anyways, thanks for all the responses posted above.

   Log in to Reply