Title: Expandable/collapsible Posts?
Last modified: August 31, 2016

---

# Expandable/collapsible Posts?

 *  [Twoogy](https://wordpress.org/support/users/twoogy/)
 * (@twoogy)
 * [10 years ago](https://wordpress.org/support/topic/expandablecollapsible-posts/)
 * I looked everywhere on the forums and tried to search through google but I didn’t
   find any answers.
    Want I want to set up is a way to have a list of posts sorted
   by categories, shown through rows. I can get a list setup no problemo, but the
   problem is connected the post category to each individual row, and having only
   a certain number of posts shown when clicked.
 * it’d also be great to have a count-up in the title as shown below 🙂
 * A good example of what I mean is at wuxiaworld.com
 * Any help is much appreciated!

Viewing 1 replies (of 1 total)

 *  [ThePixelMe](https://wordpress.org/support/users/thepixelme/)
 * (@thepixelme)
 * [10 years ago](https://wordpress.org/support/topic/expandablecollapsible-posts/#post-7188934)
 * > A good example of what I mean is at wuxiaworld.com
 * Okay, so we want:
 * — get the categories
    —- get the posts inside each category (maximum of 2) ——
   get the excepts for each post.
 * default state of posts is hidden; only show when their category is clicked.
 * .
 * And the code references for each of those:
 * — [get_categories ()](https://developer.wordpress.org/reference/functions/get_categories/)
   —-
   [get_posts()](https://developer.wordpress.org/reference/functions/get_posts/)——
   [the_except()](https://developer.wordpress.org/reference/functions/the_excerpt/)
 * and we can use some basic css + javascript for the hide/show thing
 * .
 * As for the foreach loop, just nest your posts’ foreach loop inside your categories’
   foreach loop, like so:
 *     ```
       foreach($categories as $category) {
           // some stuffs here
   
           foreach($posts as $post) {
               // some stuffs here
           }
       }
       ```
   
 * Not as complicated as it seems.
 * .
 * .
 * Here’s a demo I made, in case you need a working, basic example:
 * I grabbed the default theme Twenty Sixteen and created a child-theme call Twenty
   Sixteen Child. Then I create a custom page template call `tpl-test.php` to test
   this out. Here are the codes:
 * [custom.js](http://pastebin.com/sdJA9eS2) — basic scripts to add/remove class
   on click (to hide/show content)
    [functions.php](http://pastebin.com/actXWzdE)—
   enqueue the parent theme & enqueue child-theme’s custom.js [styles.css](http://pastebin.com/vzpFp8x8)—
   child-theme name and some basic styles [tpl-test.php](http://pastebin.com/pzqHgztD)—
   where the main codes for expandable/collapsible posts lies
 * .
 * And the result: [http://i.imgur.com/VwDEwxo.gifv](http://i.imgur.com/VwDEwxo.gifv)
 * This is just the barebone version, but it can get you started.

Viewing 1 replies (of 1 total)

The topic ‘Expandable/collapsible Posts?’ is closed to new replies.

## Tags

 * [category](https://wordpress.org/support/topic-tag/category/)
 * [collapsible](https://wordpress.org/support/topic-tag/collapsible/)
 * [expandable](https://wordpress.org/support/topic-tag/expandable/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)
 * [separated](https://wordpress.org/support/topic-tag/separated/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [ThePixelMe](https://wordpress.org/support/users/thepixelme/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/expandablecollapsible-posts/#post-7188934)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics