Output in Tabs

This is possible with a bit of coding some Javascript to support the process, and then some styling (css) magic to achieve the desired look.

You will probably want some javascript similar to below for the hide and show of the selected item:

(function() {
  // hide all but the first letter - save the list for later
  var blocks = jQuery('.letter-section');
  blocks.hide().first().show();
  
  // make clicks show and hide the right sections
  var tabs = jQuery('[href^="#letter-"]');
  tabs.click(function() {
    var id = this.attr('href');
    blocks.hide();
    jQuery('#' + id).show();
    tabs.removeClass('selected');
    this.addClass('selected');
  });
}());

I’ve marked this as resolved, but please come back if you want or need further discourse or assistance.

HI,

The code above doesn’t seem to work. It shows the 1st tab with its content but when I click on all the other letters (tabs), nothing shows up. Is there CSS missing? The content is all display:none but when clicking on the other letters, nothing moves/changes.

I feel like there is just a small piece of coding missing to make it happen.

Can you please help!
Thanks!

The above code was an untested example to show the general process for a possible implementation. That it doesn’t work is somewhat unsurprising given that I didn’t test it :-). The plugin doesn’t do tab-style output itself, so custom coding is required by the site owner or developer to add the functionality.

Hi,

Thank ou for your answer. Any way you can give me a hand with this one? I am the developper and I have tried all kinds of things but it won’t work. I am sure it’s a small thing but I don’t see it. All I see is the content of the A with its children. I can even click on the other letters and the URL at the top changes for the right ID, but the content stays in the letter A.

Can you please help me?
Thank you,