Answers.Body: <p>With the use of <a href="https://github.com/timkelty/craft-groupby/blob/master/README.md" rel="nofollow noreferrer">Tim Kelty's groupBy plugin</a> and some initial direction from @stephenlewis (thanks). The following code seems to have resolved my issue. I am little surprised this couldn't be achieved natively though. Unless there is a native solution, but I tried various approaches.</p>
  
  <pre><code>&lt;div class="container // island-bottom"&gt;
  
  {% set cables       = entry.cables.find() %}
  {% set cableCats    = craft.categories.group('cables') %}
  
  {% set groupedEntries = cables|groupBy('cableCategory.title') %}
  {% for cableGroups in groupedEntries %}
  &lt;div class="cableGroup"&gt;
      {% for category in cableCats.relatedTo(cableGroups) %}
      &lt;h2 class="panel__title"&gt;{{ category.title }}&lt;/h2&gt;
      &lt;div class="cableGroup__description content // margin-bottomX2"&gt;
          {{ category.description }}
      &lt;/div&gt;
      {% endfor %}
  
      {% for cable in cableGroups %}
          {% if loop.first %}&lt;ul&gt;{% endif -%}
              &lt;li class="cable"&gt;
                  &lt;a href="#{{ cable.title|camel|upper }}" data-title="{{ cable.title }} &amp;#xa;"&gt;
                      &lt;img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}"&gt;
                      &lt;h3 class="cable__tag"&gt;{{ cable.title }}&lt;/h3&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          {% if loop.last %}&lt;/ul&gt;{% endif %}
      {% endfor %}
  
      {% for cable in cableGroups %}
          &lt;div id="{{ cable.title|camel|upper }}" class="modal"&gt;
              &lt;div class="modal__close"&gt;
                  &lt;a href="#close" title="Close" class="modal__closeBtn"&gt;
                      &lt;span class="label close"&gt;&lt;span class="icon-close heavy"&gt;&lt;/span&gt;Close&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="modal__content // cable__modal"&gt;
                  &lt;div class="cable__img"&gt;
                      &lt;img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="cable__content"&gt;
                      &lt;h3 class="cable__title"&gt;
                          {{ cable.title }}
                      &lt;/h3&gt;
                      &lt;p&gt;{{ cable.cableDescription }}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  {% endfor %}
  &lt;/div&gt; 
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T14:27:34.693Z
Answers.LastActivityDate: 2017-03-10T14:27:34.693Z
Answers.UserDisplayName: Terry Upton
Answers.Body: <p>Your example is a trifle confusing, but in answer to your general question about grouping entries by a category field, <a href="https://github.com/timkelty/craft-groupby/blob/master/README.md" rel="nofollow noreferrer">Tim Kelty's groupBy plugin</a> may help.</p>
  
  <p>For example:</p>
  
  <pre><code>{% set groupedEntries = allEntries|groupBy('myCategoryField.title', 'Oddments') %}
  {% for categoryTitle, categoryEntries in groupedEntries %}
      &lt;h2&gt;{{ categoryTitle }}&lt;/h2&gt;
  
      {% for categoryEntry in categoryEntries %}
          {{ categoryEntry.title }}
      {% endfor %}
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T09:55:14.067Z
Answers.Text: Thanks Stephen. Is this not possible without a plugin?
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T10:39:22.293Z
Answers.Text: I have this working, in that they are grouped and only those entries showing but I can't seem to be able to also show the description for each category as well as the title? Any ideas?
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T11:52:06.763Z
Answers.Text: Ah, right. If you need additional information about the category (such as the description), the above won't work. [This Craft Cookbook recipe](https://craftcookbook.net/recipes/category-group-based-tabs-grouping-entries-by-categories) should point you in the right direction.
Answers.UserDisplayName: Stephen Lewis
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-10T09:32:24.837Z
Answers.LastActivityDate: 2017-03-10T09:32:24.837Z
Answers.UserDisplayName: Stephen Lewis
Body: <p>Anyone able to direct me on this?
  I have a page that allows you to pick related entries (cables) within the page I want to output the related entries (cables) but group them by their category. I have the following code by this is adding each cable into each category and not just the cable within the right category.</p>
  
  <pre><code>&lt;div class="container // island-bottom"&gt;
      {% set categories = craft.categories.group('cables') %}
  
      {# {% set cables = craft.entries.section('cables').order('title').limit(null) %} #}
  
      {% set cables = entry.cables %}
  
      {% for entry in cables %}
          {{ entry.title }}
      {% endfor %}
  
      {% for category in categories.relatedTo(cables) %}
          &lt;div class="cableGroup"&gt;
              &lt;h2 class="panel__title"&gt;{{ category }}&lt;/h2&gt;
              &lt;div class="cableGroup__description content // margin-bottomX2"&gt;
                  {{ category.description }}
              &lt;/div&gt;
  
              &lt;ul&gt;
                  {% for entry in cables %}
                      &lt;li class="cable"&gt;
                          &lt;a href="#{{ entry.title|camel|upper }}" data-title="{{ entry.title }} &amp;#xa;"&gt;
                              &lt;img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}"&gt;
                              &lt;h3 class="cable__tag"&gt;{{ entry.title }}&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  {% endfor %}
              &lt;/ul&gt;
  
              {% for entry in cables.relatedTo(category) %}
                  &lt;div id="{{ entry.title|camel|upper }}" class="modal"&gt;
                      &lt;div class="modal__close"&gt;
                          &lt;a href="#close" title="Close" class="modal__closeBtn"&gt;
                              &lt;span class="label close"&gt;&lt;span class="icon-close heavy"&gt;&lt;/span&gt;Close&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="modal__content // cable__modal"&gt;
                          &lt;div class="cable__img"&gt;
                              &lt;img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}"&gt;
                          &lt;/div&gt;
  
                          &lt;div class="cable__content"&gt;
                              &lt;h3 class="cable__title"&gt;
                                  {{ entry.title }}
                              &lt;/h3&gt;
                              &lt;p&gt;{{ entry.cableDescription }}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              {% endfor %}
          &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
Tags: <categories><relations><relatedto>
Title: Show related entries grouped by category with category title and description
ThreadText: # Show related entries grouped by category with category title and description
  
  (Asked by: username_0 on 2017-03-09)
  
  Anyone able to direct me on this?
  I have a page that allows you to pick related entries (cables) within the page I want to output the related entries (cables) but group them by their category. I have the following code by this is adding each cable into each category and not just the cable within the right category.
  
  ```
  <div class="container // island-bottom">
      {% set categories = craft.categories.group('cables') %}
  
      {# {% set cables = craft.entries.section('cables').order('title').limit(null) %} #}
  
      {% set cables = entry.cables %}
  
      {% for entry in cables %}
          {{ entry.title }}
      {% endfor %}
  
      {% for category in categories.relatedTo(cables) %}
          <div class="cableGroup">
              <h2 class="panel__title">{{ category }}</h2>
              <div class="cableGroup__description content // margin-bottomX2">
                  {{ category.description }}
              </div>
  
              <ul>
                  {% for entry in cables %}
                      <li class="cable">
                          <a href="#{{ entry.title|camel|upper }}" data-title="{{ entry.title }} &#xa;">
                              <img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}">
                              <h3 class="cable__tag">{{ entry.title }}</h3>
                          </a>
                      </li>
                  {% endfor %}
              </ul>
  
              {% for entry in cables.relatedTo(category) %}
                  <div id="{{ entry.title|camel|upper }}" class="modal">
                      <div class="modal__close">
                          <a href="#close" title="Close" class="modal__closeBtn">
                              <span class="label close"><span class="icon-close heavy"></span>Close</span>
                          </a>
                      </div>
                      <div class="modal__content // cable__modal">
                          <div class="cable__img">
                              <img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}">
                          </div>
  
                          <div class="cable__content">
                              <h3 class="cable__title">
                                  {{ entry.title }}
                              </h3>
                              <p>{{ entry.cableDescription }}</p>
                          </div>
                      </div>
                  </div>
              {% endfor %}
          </div>
      {% endfor %}
  </div>
  
  ```
  
  **Tags:** categories, relations, relatedto
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2017-03-10. Score: 1 | Accepted answer
  
  With the use of [Tim Kelty's groupBy plugin](https://github.com/timkelty/craft-groupby/blob/master/README.md) and some initial direction from @username_1 (thanks). The following code seems to have resolved my issue. I am little surprised this couldn't be achieved natively though. Unless there is a native solution, but I tried various approaches.
  
  ```
  <div class="container // island-bottom">
  
  {% set cables       = entry.cables.find() %}
  {% set cableCats    = craft.categories.group('cables') %}
  
  {% set groupedEntries = cables|groupBy('cableCategory.title') %}
  {% for cableGroups in groupedEntries %}
  <div class="cableGroup">
      {% for category in cableCats.relatedTo(cableGroups) %}
      <h2 class="panel__title">{{ category.title }}</h2>
      <div class="cableGroup__description content // margin-bottomX2">
          {{ category.description }}
      </div>
      {% endfor %}
  
      {% for cable in cableGroups %}
          {% if loop.first %}<ul>{% endif -%}
              <li class="cable">
                  <a href="#{{ cable.title|camel|upper }}" data-title="{{ cable.title }} &#xa;">
                      <img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}">
                      <h3 class="cable__tag">{{ cable.title }}</h3>
                  </a>
              </li>
          {% if loop.last %}</ul>{% endif %}
      {% endfor %}
  
      {% for cable in cableGroups %}
          <div id="{{ cable.title|camel|upper }}" class="modal">
              <div class="modal__close">
                  <a href="#close" title="Close" class="modal__closeBtn">
                      <span class="label close"><span class="icon-close heavy"></span>Close</span>
                  </a>
              </div>
              <div class="modal__content // cable__modal">
                  <div class="cable__img">
                      <img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}">
                  </div>
  
                  <div class="cable__content">
                      <h3 class="cable__title">
                          {{ cable.title }}
                      </h3>
                      <p>{{ cable.cableDescription }}</p>
                  </div>
              </div>
          </div>
      {% endfor %}
  </div>
  {% endfor %}
  </div> 
  
  ```
  
  
  ---
  
  ### Answer by username_1 on 2017-03-10. Score: 2
  
  Your example is a trifle confusing, but in answer to your general question about grouping entries by a category field, [Tim Kelty's groupBy plugin](https://github.com/timkelty/craft-groupby/blob/master/README.md) may help.
  
  For example:
  
  ```
  {% set groupedEntries = allEntries|groupBy('myCategoryField.title', 'Oddments') %}
  {% for categoryTitle, categoryEntries in groupedEntries %}
      <h2>{{ categoryTitle }}</h2>
  
      {% for categoryEntry in categoryEntries %}
          {{ categoryEntry.title }}
      {% endfor %}
  {% endfor %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks username_1. Is this not possible without a plugin?  
  > **username_0**: I have this working, in that they are grouped and only those entries showing but I can't seem to be able to also show the description for each category as well as the title? Any ideas?  
  > **username_1**: Ah, right. If you need additional information about the category (such as the description), the above won't work. [This Craft Cookbook recipe](https://craftcookbook.net/recipes/category-group-based-tabs-grouping-entries-by-categories) should point you in the right direction.  
  
  ---
  
  