Menu icon Foundation
F6 Tabs with Handlebars json

Hi All

I would like to create a tabs section on a contact page, but to input the various contact information from an external json file using handlebars, the code I have so far is as below.

         <div class="tabs-content" data-tabs-content="contact-tabs">
            <div class="tabs-panel is-active" id="panel1">
               <div class="row">
                  <div class="small-12 medium-4 columns">
                     <img src="{{image1}}" alt="{{alt1}}">
                  </div>
                  <div class="small-12 medium-8 columns">
                     <ul>
                        <li>{{contact1}}</li>
                        <li>{{job1}}</li>
                        <li><a href="tel:{{phone1}}" aria-label=""><i class="fa fa-phone fa-fw" aria-hidden="true"></i>{{phone1}}</a></li>
                        <li><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i>
                           <script type="text/javascript">
                           document.write('<a href="mailto:' + first + '@' + last + '">' + first + '@' + last + '<\/a>');
                           </script>
                        </li>
                     </ul>
                     <div class="social columns">
                        <a href="#" target="_blank"><i class="fa fa-facebook" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-twitter" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-pinterest" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-dribbble" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-linkedin" aria-label=""></i></a>
                     </div>
                  </div>
               </div>

and the json

{"contacts": [
  {"image1": "./assets/img.c1.jpg", "alt1": "image c1", "contact1": "Carl Berg", "job1": "Head Honcho", "phone1": "01992 992210"}, 
  {"image2": "./assets/img.c2.jpg", "alt2": "image c2", "contact2": "Tony O'rouke", "job2": "Assistant Head Honcho", "phone2": "01992 992211"},
  {"image3": "./assets/img.c3.jpg", "alt3": "image c3", "contact3": "Karla Mach", "job3": "Go To Girl", "phone3": "01992 992212"}, 
  {"image4": "./assets/img.c4.jpg", "alt4": "image c4", "contact4": "Sue Jones", "job4": "Understudy", "phone4": "01992 992213"},
  {"image5": "./assets/img.c5.jpg", "alt5": "image c5", "contact5": "Tim Jak", "job5": "Top Dog", "phone5": "01992 992214"}, 
  {"image6": "./assets/img.c6.jpg", "alt6": "image c6", "contact6": "Imal Hidru", "job6": "Under Dog", "phone6": "01992 992215"},
  {"image7": "./assets/img.c7.jpg", "alt7": "image c7", "contact7": "Pierre Houche", "job7": "Head IT Bloke", "phone7": "01992 992216"}, 
  {"image8": "./assets/img.c8.jpg", "alt8": "image c8", "contact8": "Jan Kopper", "job8": "Under IT Gal", "phone8": "01992 992217"}
]}

 

Thanks in advance.

 

Will

F6tabsHandlebarsJSON

Hi All

I would like to create a tabs section on a contact page, but to input the various contact information from an external json file using handlebars, the code I have so far is as below.

         <div class="tabs-content" data-tabs-content="contact-tabs">
            <div class="tabs-panel is-active" id="panel1">
               <div class="row">
                  <div class="small-12 medium-4 columns">
                     <img src="{{image1}}" alt="{{alt1}}">
                  </div>
                  <div class="small-12 medium-8 columns">
                     <ul>
                        <li>{{contact1}}</li>
                        <li>{{job1}}</li>
                        <li><a href="tel:{{phone1}}" aria-label=""><i class="fa fa-phone fa-fw" aria-hidden="true"></i>{{phone1}}</a></li>
                        <li><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i>
                           <script type="text/javascript">
                           document.write('<a href="mailto:' + first + '@' + last + '">' + first + '@' + last + '<\/a>');
                           </script>
                        </li>
                     </ul>
                     <div class="social columns">
                        <a href="#" target="_blank"><i class="fa fa-facebook" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-twitter" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-pinterest" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-dribbble" aria-label=""></i></a>
                        <a href="#" target="_blank"><i class="fa fa-linkedin" aria-label=""></i></a>
                     </div>
                  </div>
               </div>

and the json

{"contacts": [
  {"image1": "./assets/img.c1.jpg", "alt1": "image c1", "contact1": "Carl Berg", "job1": "Head Honcho", "phone1": "01992 992210"}, 
  {"image2": "./assets/img.c2.jpg", "alt2": "image c2", "contact2": "Tony O'rouke", "job2": "Assistant Head Honcho", "phone2": "01992 992211"},
  {"image3": "./assets/img.c3.jpg", "alt3": "image c3", "contact3": "Karla Mach", "job3": "Go To Girl", "phone3": "01992 992212"}, 
  {"image4": "./assets/img.c4.jpg", "alt4": "image c4", "contact4": "Sue Jones", "job4": "Understudy", "phone4": "01992 992213"},
  {"image5": "./assets/img.c5.jpg", "alt5": "image c5", "contact5": "Tim Jak", "job5": "Top Dog", "phone5": "01992 992214"}, 
  {"image6": "./assets/img.c6.jpg", "alt6": "image c6", "contact6": "Imal Hidru", "job6": "Under Dog", "phone6": "01992 992215"},
  {"image7": "./assets/img.c7.jpg", "alt7": "image c7", "contact7": "Pierre Houche", "job7": "Head IT Bloke", "phone7": "01992 992216"}, 
  {"image8": "./assets/img.c8.jpg", "alt8": "image c8", "contact8": "Jan Kopper", "job8": "Under IT Gal", "phone8": "01992 992217"}
]}

 

Thanks in advance.

 

Will