Load more & Accordion custom widgets together (real data)

by jmeile

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<div id="jm-accordion">
  <h5>
    Abgeschlossene Arbeiten
  </h5>
  <div>
    <div class="jm-show-more">
      <div>
        <a class="eth-link" href="">M. Lutfallah</a>,
        C. Hirt,
        <a class="eth-link" href="">A. Kunz</a>,
        Semesterarbeit,
        Remote Cross-platform Collaboration between AR and VR, 2022,
        <a href='' target='_blank' class='eth-link'>Ausschreibung</a>
      </div>
      <div>
        C. Hirt,
        <a class="eth-link" href="">S. Süßmaier</a>,
        <a class="eth-link" href="">A. Kunz</a>,
        Semesterarbeit,
        Language-Independent Instructions for Training in Virtual Reality, 2021,
        <a href='' target='_blank' class='eth-link'>Ausschreibung</a>
      </div>
      <div>
        C. Hirt,
        <a class="eth-link" href="">J. Gisler</a>,
        <a class="eth-link" href="">A. Kunz</a>,
        Semesterarbeit,
        Infinite Virtual Labyrinth - An Adapting Maze for Spatial Awareness Tests, 2021,
        <a href='' target='_blank' class='eth-link'>Ausschreibung</a>
      </div>
      <div>
        <a class="eth-link" href="">V. Gorobets</a>,
        C. Hirt, <a class="eth-link" href="">A. Kunz</a>,
        Semesterarbeit,
        Redirected Walking in Overlapping Rooms, 2021,
        <a href='' target='_blank' class='eth-link'>Ausschreibung</a>
      </div>
      <div>
        C. Hirt,
        <a class="eth-link" href="">A. Kunz</a>,
        Semesterarbeit,
        Human Path Prediction based on Real User Data using Machine Learning Approaches, 2021,
        <a href='' target='_blank' class='eth-link'>Ausschreibung</a>
      </div>
      <div>
        B. Käch,
        C. Hirt,
        <a class="eth-link" href="">A. Kunz</a>,
        Masterarbeit,
        Emotion...

CSS

.jm-show-more {
  font: normal 13px/100% sans-serif;
}

.jm-show-more {
  color: #444;
}

.jm-show-more > h2 {
  margin: 0px;
  padding: 0px;
}

/* The following styles are also optional and are to illustrate how to style
 * the widget. This styling can be also achieve by using the ids from each
 * widget instance, for example:
 * ""#jm-list-thesis" > div will only style the widget with the id:
 * jm-list-thesis
 */
.jm-show-more > div {
  padding: 10px;
  border-width: 0px;
}

.jm-show-more > div {  
  /* This will show bullets inside the items */
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
}

.jm-show-more > button {
  cursor: pointer;
  padding: 10px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  margin-left: 2px;
  margin-bottom: 15px;
}

.jm-show-more > button {
  background-color: #dddddd;
  color: #454545;
  border-color: #c5c5c5;
  box-shadow: 0 1px 1px #ccc;
}

.jm-show-more > button:hover {
  background-color: #ededed;
  color: #2b2b2b;
}


/* To access an specific button, then you can use the css selector
 * :nth-last-child
 * 
 * For example, we now that the buttons have the following DOM order:
 * <collapse> <show more> <show all>
 *
 * So, for styling the the <collapse> button, you have to access the third
 * button from the last position of the container, which is: 
 * .jm-show-more > :nth-last-child(3)
 */

/* The following styles are optional */

/* jquery ui Accordion Widget */
.jm-accordion .ui-accordion-content {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0em;
  padding-bottom: 0em;
}

.jm-accordion .ui-accordion-header {
  padding-left: 0.1em;
  padding-right: 0.1em;
}

JavaScript

/* I used the following as a refference while implementing a custom jQuery
 * Widget:
 * - Extending Widgets with the Widget Factory
 *   https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
 * - How To Use the Widget Factory
 *   https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/
 * - Chapter 9. Extending widgets with the widget factory
 *   https://livebook.manning.com/book/jquery-ui-in-action/chapter-9/17
 * - Widget Factory (Example)
 *   https://jqueryui.com/widget/#default
 * - Widget Factory (Methods and properties)
 *   https://api.jqueryui.com/jQuery.widget/
 */

/* Here I'm saying that my widget is inside the "custom" namespace, which is
 * useful in order to avoid breaking the jQuery namespaces. Then I give it the
 * name "jmShowMore"
 */
$.widget("custom.jmShowMore", {
 
  // Here I added some options for the Widget
  options: {
    // Number of items to show
    pagination: 6,
    
    /* The following option is the css class for styling the widget.
     * Please note that I didn't add a class for the items (div elements inside
     * the container because you can easily style them by only using css, just
     * do:
     * .jm-show-more > div { ... your styles here ... }
     *
     * The same applies for the header:
     * .jm-show-more > h2 { ... your styles here ... }
     *
     * And event for the buttons:
     * .jm-show-more > button { ... your styles here ... }
     *
     * To access an specific button, then you can use the css selector
     * :nth-last-child
     * 
     * For example, we now that the buttons have the following DOM order:
     * <collapse> <show more> <show all>
     *
     * So, for styling the the <collapse> button, you have to access the third
     * button from the last position of the container, which is: 
     * .jm-show-more > :nth-last-child(3)
     *
     * The last position button, <show all> is then:
     * .jm-show-more > :nth-last-child(1)
     */
   ...