1

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);
0

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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.