How to enable the publication of content in the heading "post" on the page?

Question

I am trying to give all the headers of "posts" on a specific page. Therefore, if someone clicks on these messages, this content should be switched under the heading, and if a few clicks of the heading again, the content should hide.

I solved half the problem using the WP-Archives Plugin. And my page is as follows Check this image here . So these are the Archive Links. And if someone clicks on it, it will take something. I want the content in specific messages to be on the same page as a switch (in the image abvoe ..). Is it possible?

Answer 1

It sounds like you are describing the function of an accordion. Wordpress offers a bunch of accordion plugins. Here are a few: http://wordpress.org/plugins/tags/accordion

If you are looking for something with less control, you can look directly into the jquery accordion widget. See the information here: http://jqueryui.com/accordion/

EDIT

To add an accordion plugin to your list, you need to apply the following changes. Add the following to your 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, change the following line:

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

:

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

, , , ( , , ). , , , "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";

Answer 2

script, jQueryUI Accordion, , .

(. ):

---

1) 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) acc.js :

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

3) , :

<?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;?>

---

Wordpress , ... .

, . , , , , ... :

• Wordpress jQuery Accordion Plugin
• WP Post Accordion

Answer 3

Collapse-O-Matic Plugin wordpress - , , Wordpress:( , - . , , .