Data-Toggle CMS Page Magento 2

Question

Okay, so I just want a CMS page that has toggled content, but there seems to be some conflict. How would I resolve this code to work for Magento 2 CMS?

<div class="container">


<h2>Projects</h2>
  <p>Projects with our products</p>
  <ul class="nav nav-tabs" style="text-align: center;">
    <li class="active"><a href="#home">Residential</a></li>
    <li><a href="#menu1">Commercial</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>Residential</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Commercial</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</script>

and then the jquery in magento:

define([
  "jquery"
], function(jQuery){


!function ($) {

  "use strict"; // jshint ;_;


 /* TAB CLASS DEFINITION
  * ==================== */

  var Tab = function ( element ) {
    this.element = $(element)
  };

  Tab.prototype = {

    constructor: Tab

  , show: function () {
      var $this = this.element
        , $ul = $this.closest('ul:not(.dropdown-menu)')
        , selector = $this.attr('data-target')
        , previous
        , $target
        , e;

      if (!selector) {
        selector = $this.attr('href');
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
      }

      if ( $this.parent('li').hasClass('active') ) return;

      previous = $ul.find('.active a').last()[0];

      e = $.Event('show', {
        relatedTarget: previous
      });

      $this.trigger(e);

      if (e.isDefaultPrevented()) return;

      $target = $(selector);

      this.activate($this.parent('li'), $ul);
      this.activate($target, $target.parent(), function () {
        $this.trigger({
          type: 'shown'
        , relatedTarget: previous
        })
      })
    }

  , activate: function ( element, container, callback) {
      var $active = container.find('> .active')
        , transition = callback
            && $.support.transition
            && $active.hasClass('fade');

      function next() {
        $active
          .removeClass('active')
          .find('> .dropdown-menu > .active')
          .removeClass('active');

        element.addClass('active');

        if (transition) {
          element[0].offsetWidth; // reflow for transition
          element.addClass('in');
        } else {
          element.removeClass('fade')
        }

        if ( element.parent('.dropdown-menu') ) {
          element.closest('li.dropdown').addClass('active')
        }

        callback && callback()
      }

      transition ?
        $active.one($.support.transition.end, next) :
        next();

      $active.removeClass('in')
    }
  };


 /* TAB PLUGIN DEFINITION
  * ===================== */

  $.fn.tab = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('tab');
      if (!data) $this.data('tab', (data = new Tab(this)));
      if (typeof option == 'string') data[option]()
    })
  };

  $.fn.tab.Constructor = Tab;


 /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault();
      $(this).tab('show')
    })
  })

}(jQuery);

Answer 1

I used CSS only and it worked! No jquery issues

<style>* {
        box-sizing: border-box;
      }

      body {
        padding: 10px;
        background: #f2f2f2;
        text-align: center;
      } .tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
} .input {
  position: absolute;
  opacity: 0;
} .label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
}

.input:focus + .label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}

.input:checked + .label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
} .panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}

@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}

.input:checked + .label + .panel {
  display: block;
}</style>
    <div class="tabs">
        <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
        <label for="tab-1" class="label">Commercial</label>
        <div class="panel">
          <p><img src="http://via.placeholder.com/640x360" style="max-width: 40%;"></p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti consequuntur eveniet aut expedita enim rem esse repudiandae, quis dignissimos, et, culpa in necessitatibus commodi. Neque nostrum velit aperiam voluptates nobis.</p>
        </div>

        <input name="tabs" type="radio" id="tab-2" class="input"/>
        <label for="tab-2" class="label">Residential</label>
        <div class="panel">
          <p> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> </p>
          <p>Stuff and things</p>
        </div>

      </div>