0

I’m new to EE and coming from a Drupal background. I’m enjoying learning EE.

Question: How do I display the fields from a custom channel into tabs?

A perfect example I would like to replicate is this page here:

http://www.genuinehealth.com/store/greens-daily-detox#.VuwFlpMrJTY

You will notice that there are 4 tabs below the product and when in a mobile view, the tabs are compressed to a mobile like menu. I would like each custom field to be displayed in a tab.

Can EE do anything similar ??

Thanks in advanced! Rob

0

WElcome, this question is a staple of EE. WHilst we can show you how to capture the information and give you the basics, you'll need CSS & JS to complete the functionaity.

So, lets create a channel named "products" in EE with the following fields:

  • detail - Textarea (or WYSIWYG)
  • image - File upload
  • tab01 - Textarea (or WYSIWYG)
  • tab02 - Textarea (or WYSIWYG)
  • tab03 - Textarea (or WYSIWYG)

As you may see we're cpaturing the data we need into their own little areas which we'll now use in a template.

{exp:channel:entries channel="products"}
<article>
  <h1>{title}</h1>
  <img src="{image}/>
  <div class="tab-group">
    <a href="#tab1">Tab Name</a>
    <a href="#tab2">Tab Name</a>
    <a href="#tab3">Tab Name</a>
    <a href="#tab4">Tab Name</a>
  </div>
  <div class="tab-items'>
    <div id="tab1" class="active">
      {tab01}
    </div>
    <div id="tab2">
      {tab02}
    </div>
    <div id="tab3">
      {tab03}
    </div>
    <div id="tab4">
      {tab04}
    </div>
  </div>
</article>
{/exp:channel:entries}

Then for the JS:

//Found this here: http://jsfiddle.net/R85tE/293/ but there are a million other ways to do this.
$('.tab-items div').hide();
$('.tab-items div:first').show();

$('.tab-group li').click(function() {
    $('.tab-group li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('.tab-items div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

Hopefully this will get you started!

1
  • Hey thanks for this! I will try this out. I appreciate it :)
    – RSantos
    Mar 22 '16 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.