How to Display custom fields into tabs?

Question

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

Answer 1

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!