Skip to content

Instantly share code, notes, and snippets.

@moladukes

moladukes/simple-tab-example.html

Last active August 15, 2016 19:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moladukes/3a6b50d2c8630ffa16f921ebd97a5c6a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moladukes/3a6b50d2c8630ffa16f921ebd97a5c6a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. moladukes revised this gist Aug 15, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion simple-tab-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    display: block;
    }
    </style>
    <!-- JS -->
    <!-- JS // Requires Jquery -->
    <script>
    $('.tab').on('click', function(evt) {
    evt.preventDefault();
  2. moladukes created this gist Aug 15, 2016.
    32 changes: 32 additions & 0 deletions simple-tab-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <!-- CSS -->
    <style>
    .tab-content {
    display: none;
    }
    .tab-content.active {
    display: block;
    }
    </style>
    <!-- JS -->
    <script>
    $('.tab').on('click', function(evt) {
    evt.preventDefault();
    $(this).toggleClass('active');
    var sel = this.getAttribute('data-toggle-target');
    $('.tab-content').removeClass('active').filter(sel).addClass('active');
    });
    </script>

    <!-- Tabs -->
    <a href="#" class="tab active" data-toggle-target=".tab-content-1">Tab 1</a>
    <a href="#" class="tab" data-toggle-target=".tab-content-2">Tab 2</a>

    <!-- Content -->
    <div class="tab-content tab-content-1 active">
    <h1>Tab Content 1</h1>
    </div>
    <div class="tab-content tab-content-2">
    <h1>Tab Content 2</h1>
    </div>

    <!-- Fin -->