Hos Musalaha, ønskede vi at lave vores Q&A liste mere overskuelig, og vores endelige løsning blev jQuery’s Accordion samt lidt ekstra JavaScript til at styre hvad vores brugere så.

jQuerys Accordion er utroligt let at bruge, alt hvad man behøver at gøre er at indsætte et par links i bunden af ens website (JavaScript bør altid ende i bunden af dit site). I Wordpres er det endnu nemmere, her tilføjer vi blot den følgende kode til vores functions.php fil.

function enqueued_scripts() {
   if ( !is_admin() ) {
      wp_enqueue_script('jquery-ui-accordion');
   }
}
add_action( 'wp_enqueue_scripts', 'enqueued_scripts' );

For at styre hvordan vores accordion skal fungere, opretter jeg filen accordion.js med følgende indhold:

jQuery(document).ready(function($) {
   $( "#accordion" ).accordion({
      heightStyle: "content",
      collapsible: true,
      active: false
   });
});

Og tilføjer den til wordpress på følgende måde:

function enqueued_scripts() {
   if ( !is_admin() ) {
      wp_enqueue_script('jquery-ui-accordion');
      wp_enqueue_script(
         'custom-accordion',
         get_stylesheet_directory_uri() . '/js/accordion.js',
         array('jquery')
      );
   }
}
add_action( 'wp_enqueue_scripts', 'enqueued_scripts' );

Slutteligt skal vi have opdateret vores Q&A så den udnytter jQuery’s Accordion. Dette gøres i tekst-editoren for din WordPress side:

<div id="accordion">
   <h3>Section 1</h3>
   <div> Mauris mauris ante, blandit et, ultrices a,...</div>
   <h3>Section 2</h3>
   <div> Sed non urna. Donec et ante. Phasellus eu ligula...</div>
</div>

De sidste rettelser

Så er vi faktisk færdige, men accordion kan hurtigt gå hen og blive uoverskueligt, især når man er en mobilbruger. I vores tilfælde, ønskede vi at have det således at når man klikkede på en ny overskrift for at åbne den, lukkede den tidligere fane sig automatisk sammen. Dette fungerede fantastisk på desktop computere, men på mobile enheder blev det hurtigt rodet. Man endte med at scrolle frem og tilbage for at kunne læse indholdet af vores Q&A.

For at løse dette problem vendte jeg snuden mod StackOverflow. Som så ofte før, viste det sig at der var andre der havde haft samme problem som jeg. Her fandt jeg frem til denne løsning, som virkede præcist som jeg ønskede den skulle:

activate: function( event, ui ) {
   if(!$.isEmptyObject(ui.newHeader.offset())) {
      $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
   }
}

Efter en opdatering af accordion.js med denne kode ender vi slutteligt ud med dette

jQuery(document).ready(function($) {
   $( "#accordion" ).accordion({
      heightStyle: "content",
      collapsible: true,
      active: false,
      activate: function( event, ui ) {
         if(!$.isEmptyObject(ui.newHeader.offset())) {
            $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
         }
      }
   });
});

Ændringer specifikt for mobile enheder

Hvis man ikke ønsker at siden automatisk skal flytte fokus til toppen af overskriften når man er på en desktop computer, kan man tjekke hvorvidt brugeren er på en mobil eller stationær enhed. Der er mange måder at gøre dette på. Min personlige favorit er at bruge så simpelt JavaScript som muligt, både fordi simpel kode er nemmest at læse, og fordi man så ikke skal huske at importere en masse biblioteker. Denne følgende kode (fundet på StackOverflow) kan bruges til at tjekke om din bruger er på en mobil platform:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   // some code..
}