Display custom fields into Tabs ??
How Do I?
Hi all!
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?
For example in my channel if i have 3 custom fields, I would like to display those three custom fields each into their own tab within the template. Another question is, how do I make it responsive?
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.
Can EE do anything similar ??
Thanks in advanced! Rob
You can definitely display your custom fields in tabs on your front end. The specifics will greatly depend on your site’s CSS and JS, but in general you’d have something like:
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tab1">...</div>
<div class="tab-pane" id="tab2">...</div>
<div class="tab-pane" id="tab3">...</div>
</div>As to how to make it responsive that’ll depend on your site’s structure and CSS, but the general practice is to use a grid. It’s a broad topic and there are quite a lot of resources available, just search for “responsive grid” in your favorite search engine. 😊