The categories widget block will collapse the number of subcategories if there are more than 5 subcategories. This can be fixed by changing the code quite easily.

This is the code for the category widget block:

{{$catClass = '\IPS\cms\Categories' . \IPS\cms\Databases\Dispatcher::i()->databaseId;}}
{{$categories = $catClass::roots();}}
{{if !empty( $categories )}}
	<h3 class='ipsWidget_title ipsType_reset'>{lang="categories"}</h3>
	<div class='ipsSideMenu ipsAreaBackground_reset ipsPad_half'>
		<ul class='ipsSideMenu_list'>
			{{foreach $categories as $category}}
				<li>
					<a href="{$category->url()}" class='ipsSideMenu_item ipsTruncate ipsTruncate_line'><span class='ipsBadge ipsBadge_style1 ipsPos_right'>{expression="\IPS\cms\Records::contentCount( $category )"}</span><strong class='ipsType_normal'>{$category->_title}</strong></a>
					{{if $category->hasChildren()}}
						<ul class="ipsSideMenu_list">
							{{foreach $category->children() as $idx => $subcategory}}
								<li>
									{{if $idx >= 5}}
										<a href='{$category->url()}' class='ipsSideMenu_item'><span class='ipsType_light ipsType_small'>{lang="and_x_more" sprintf="count( $category->children() ) - 5"}</span></a>
										{{break;}}
									{{else}}
										<a href="{$subcategory->url()}" class='ipsSideMenu_item ipsTruncate ipsTruncate_line'><strong class='ipsPos_right ipsType_small'>{expression="\IPS\cms\Records::contentCount( $subcategory )"}</strong>{$subcategory->_title}</a>
									{{endif}}
								</li>
							{{endforeach}}
						</ul>
					{{endif}}
				</li>
			{{endforeach}}
		</ul>
		<p class='ipsType_center'>
			<a href='{$url->setQueryString('show','categories')}' class=''>{lang="cms_show_categories"} &nbsp;<i class='fa fa-caret-right'></i></a>
		</p>
	</div>
{{endif}}

In this code you will see this snippet:

{if $idx >= 5}}
<a href='{$category->url()}' class='ipsSideMenu_item'><span class='ipsType_light ipsType_small'>{lang="and_x_more" sprintf="count( $category->children() ) - 5"}</span></a>
{{break;}}
{{else}}
<a href="{$subcategory->url()}" class='ipsSideMenu_item ipsTruncate ipsTruncate_line'><strong class='ipsPos_right ipsType_small'>{expression="\IPS\cms\Records::contentCount( $subcategory )"}</strong>{$subcategory->_title}</a>
{{endif}}

This is what control the behavior so all we need to do is to remove the top part of this and the ending endif. This will look like this:

{{$catClass = '\IPS\cms\Categories' . \IPS\cms\Databases\Dispatcher::i()->databaseId;}}
{{$categories = $catClass::roots();}}
{{if !empty( $categories )}}
	<h3 class='ipsWidget_title ipsType_reset'>{lang="categories"}</h3>
	<div class='ipsSideMenu ipsAreaBackground_reset ipsPad_half'>
		<ul class='ipsSideMenu_list'>
			{{foreach $categories as $category}}
				<li>
					<a href="{$category->url()}" class='ipsSideMenu_item ipsTruncate ipsTruncate_line'><span class='ipsBadge ipsBadge_style1 ipsPos_right'>{expression="\IPS\cms\Records::contentCount( $category )"}</span><strong class='ipsType_normal'>{$category->_title}</strong></a>
					{{if $category->hasChildren()}}
						<ul class="ipsSideMenu_list">
							{{foreach $category->children() as $idx => $subcategory}}
								<li>
									
										<a href="{$subcategory->url()}" class='ipsSideMenu_item ipsTruncate ipsTruncate_line'><strong class='ipsPos_right ipsType_small'>{expression="\IPS\cms\Records::contentCount( $subcategory )"}</strong>{$subcategory->_title}</a>
									
								</li>
							{{endforeach}}
						</ul>
					{{endif}}
				</li>
			{{endforeach}}
		</ul>
		<p class='ipsType_center'>
			<a href='{$url->setQueryString('show','categories')}' class=''>{lang="cms_show_categories"} &nbsp;<i class='fa fa-caret-right'></i></a>
		</p>
	</div>
{{endif}}

In your block add this as the first line:

{{if \IPS\Request::i()->app == 'cms' and \IPS\cms\Databases\Dispatcher::i()->categoryId == 0}}

Then close it with {{endif}} on the last row.

This little snippet will check to see if you are in a category or not. On the start page you are not in a category yet, so the result will be 0. On all other pages this check will not be true, so it will not show there.

You can use this to target specific categories as well, or show things everywhere else but on the start page.

First, we create a new .js template.

Javascript File

Go to pages->templates and click "New" at the bottom of the templates list. Select "Add Javascript file". Place it anywhere you like (I have created a separate folder for my JS files) and save it. Next find the file you created and click on it to open it.

In the file we will add a very simple javascript code to toggle CSS classes off and off. The code look like this:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
} 

CSS File

Next we add some CSS so this will actually do what we want it to do.
You can create a new CSS file, or add it to one you already have. I have mine setup as a separate CSS so I can add it only when needed.

Again go to pages ->templates and click "New" at the bottom. This time, create a CSS file by selecting "Add CSS File". Again place it anywhere you want and hit save. Find it in your list and open it.

Then add the following classes into it:
 

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 

Add HTML to the template

Now let us use this in our template.

We use Buttons to trigger the classes, and then we have a div that is toggled on or off to make the accordion work. The button need the classs "accordion" and the div that hold the content need the class "panel". That is it!

The code that we use looks like this:

<button class="accordion">Section 1</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

For multiple buttons to toggle on and off we add this multiple times:
 

<button class="accordion">Section 1</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  YOUR CONTENT GOES HERE
</div>

By adding some styling you can make the buttons look pretty much any way you want. This is an example of what one of my forms look like when styled:

In a template to use just the primary group:

<script>
  var groupId = {expression="\IPS\Member::loggedIn()->member_group_id"};
</script>

or for all group ids (comma-separated):

<script>
  var groupIds = "{expression="implode( ',', \IPS\Member::loggedIn()->groups )"}";
</script>

{{$CleanTitle = strip_tags($record->customFieldDisplayByKey('YOUR DATABASE RELATION FIELD', 'display'));}}
{$CleanTitle}