Expandable/collapsible Posts?

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 ()
—- get_posts()
——the_except()

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 — basic scripts to add/remove class on click (to hide/show content)
functions.php — enqueue the parent theme & enqueue child-theme’s custom.js
styles.css — child-theme name and some basic styles
tpl-test.php — where the main codes for expandable/collapsible posts lies

.

And the result: https://i.imgur.com/VwDEwxo.gifv

This is just the barebone version, but it can get you started.