#Tabs

<div class="be-tabs">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">This is Tab 1</label>
    <div class="be-tab-content">
    <h2>Content for Tab 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>

    <input type="radio" name="tab" id="tab2">
     <label for="tab2">This is Tab 2</label>
     <div class="be-tab-content">
     <h2>Content for Tab 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>

   <input type="radio" name="tab" id="tab3">
   <label for="tab3">This is Tab 3</label>
    <div class="be-tab-content">
    <h2>Content for Tab 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>
</div>

Vertical Tabs

To trasform this Tabs in vertical style just add "-v" to the first class, like this: .be-tabs-v.

<div class="be-tabs-v"><!-- just add "-v" to have el vertical tab-->
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">This is Tab 1</label>
    <div class="be-tab-content">
    <h2>Content for Tab 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>

    <input type="radio" name="tab" id="tab2">
     <label for="tab2">This is Tab 2</label>
     <div class="be-tab-content">
     <h2>Content for Tab 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>

   <input type="radio" name="tab" id="tab3">
   <label for="tab3">This is Tab 3</label>
    <div class="be-tab-content">
    <h2>Content for Tab 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...</p>
    </div>
</div>

By default the tab-panel has a width of 600px. See the directions in the To-Hack admonition to modify this or other features.

Remember that many modifications can be made directly to the html simply by adding the appropriate class to the change you want to make.

<div class="be-tabs-panels-container"><!--Main container -->
  <input id="label-1" name="group" type="radio" checked>
  <input id="label-2" name="group" type="radio">
  <input id="label-3" name="group" type="radio">

  <div class="be-tabs-container"><!--Tabs container -->
    <label id="tab-1" for="label-1">About</label>
    <label id="tab-2" for="label-2">Be in touch</label>
    <label id="tab-3" for="label-3">Spandau B.</label>
  </div>
    <!-- panels container -->
    <div class="be-panels-container">
            <div class="be-panel" id="panel-1">
            <h3>Panel one title</h3>
            <p>Lorem ipsum dolor sit amet..</p>
            </div>

            <div class="be-panel" id="panel-2">
            <h3>Panel two title</h3>
            <p>Lorem ipsum dolor sit amet..</p>
            </div>

            <!--In case of iframe add be-iframe-container
            and be-iframe-responsive classes -->
            <div class="be-panel be-iframe-container" id="panel-3">
            <iframe class="be-iframe-responsive">...</iframe>
            </div>

    </div>
    <!-- End of panel container -->
</div><!--End of main container -->

About Be in touch Spandau B.

This is my panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in pariatur.

This panel have some image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in pariatur.