Make content appear according to button clicked in the side menu

Question

I have a side menu listed with several lis and the contents of each menu item listed beside. I would like that when the user opens the page the first menu item is already visible, and if he clicks on some other the visible item disappears and the clicked appears.

Someone can help me?

Follow the code I made:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <ul>
        <li>Registro de produtos</li>
        <li>Acessoria de empresa</li>
        <li>Assessoria Juridica</li>
        <li>Assessoria Contábil</li>
        <li>Assessoria Pós Mercado</li>
      </ul>
    </div>

    <div class="col-md-8">
      <img src="im/registro_de_produtos.jpg">
      <h3>Registro de produtos</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/acessoria_de_empresa.jpg">
      <h3>Assessoria de Empresa</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/assessoria_juridica.jpg">
      <h3>Assessoria Juridica</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/asseoria_contabil.jpg">
      <h3>Assessoria Contábil</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/assessoria_mercado.jph">
      <h3>Assessproa Pós Mercado</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
  </div>
</div>
</div>

Answer 1

Hello friend as your question we achieved this effect using Ajax, see the code working below, hugs.

$(document).ready(function() {
  loadDataOnReady();
  loadDataOnClick();
  changeSteps();
  nextStep();
  finishWizard(function() {
    //ON FINISH EVENT
  });
});

function finishWizard(onFinish) {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');
  var currForm = $('.wizard-content form');
  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-fin', function(event) {
    var finButton = $(this);
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));
    //Get previous elements
    var nextStep = $('.step-' + (currStep + 1));
    var nextMenu = $('.step-' + (currStep + 1) + '-menu');
    var thisMenu = $('.step-' + currStep + '-menu');
    var thisStep = $('.step-' + currStep);

    //Update menu
    wizardButtons.removeClass('active');
    nextMenu.addClass('active');

    //Update button
    finButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
    finButton.addClass('disabled');

    //AJAX SUBMIT FORM
    var getMethod = currForm.attr('data-method');
    var getAction = currForm.attr('data-action');

    $.ajax({
      url: getAction,
      type: getMethod,
      data: currForm.serialize(),
      success: function() {
        //AJAX success
        wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');

        thisMenu.addClass('success');

        //Update button
        finButton.html('Finish');
        finButton.removeClass('disabled');

        window.setTimeout(function() {
          //UI
          $('.alert').hide();

          //FINISHED WIZARD
          //FUNCTION HERE
          onFinish();

        },500);
      },
      error: function() {
        //Ajax failure
        wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
        thisMenu.addClass('error');
        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();
          thisMenu.removeClass('error');
          thisMenu.addClass('active');

          //Update button
          finButton.html('Finish');
          finButton.removeClass('disabled');

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(currStep.html());
          }
        },2000);
      }
    });

  });
}

function nextStep() {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');
  var currForm = $('.wizard-content form');

  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-next', function(event) {
    var prevButton = $(this);
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));
    //Get previous elements
    var nextStep = $('.step-' + (currStep + 1));
    var nextMenu = $('.step-' + (currStep + 1) + '-menu');
    var thisMenu = $('.step-' + currStep + '-menu');
    var thisStep = $('.step-' + currStep);
    //Update menu
    wizardButtons.removeClass('active');
    nextMenu.addClass('active');

    //Update button
    prevButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
    prevButton.addClass('disabled');

    //AJAX SUBMIT FORM
    var getMethod = currForm.attr('data-method');
    var getAction = currForm.attr('data-action');

    $.ajax({
      url: getAction,
      type: getMethod,
      data: currForm.serialize(),
      success: function() {
        //AJAX success
        wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');

        thisMenu.addClass('success');

        //Update button
        prevButton.html('Next step');
        prevButton.removeClass('disabled');

        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(nextStep.html());
          }
        },500);
      },
      error: function() {
        //Ajax failure
        wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
        thisMenu.addClass('error');
        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();
          thisMenu.removeClass('error');
          thisMenu.addClass('active');

          //Update button
          prevButton.html('Next step');
          prevButton.removeClass('disabled');

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(currStep.html());
          }
        },2000);
      }
    });

  });
}

function changeSteps() {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');

  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-prev', function(event) {
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));

    //Get previous elements
    var prevStep = $('.step-' + (currStep - 1));
    var prevMenu = $('.step-' + (currStep - 1) + '-menu');

    //Update menu
    wizardButtons.removeClass('active');
    prevMenu.addClass('active');
    prevMenu.removeClass('success');

    //Get "data-for" attribute and find element

    var dataLoad = prevStep.attr('data-load');

    //        Check if attribute does exist
    //        If true then load ajax, else load from div
    if (typeof dataLoad !== 'undefined' && dataLoad !== false)
    {
      //Load content ajax
      wizardContent.load(dataLoad);
    }
    else
    {
      wizardContent.html(prevStep.html());
    }
  });
}

function loadDataOnReady()
{
  var wizardContent = $('.wizard-content');
  //Get "data-for" attribute and find element
  var dataFor = $('.wizard-menu .list-group-item.active').attr('data-for');
  var elementFor = $(dataFor);

  var dataLoad = elementFor.attr('data-load');

  //        Check if attribute does exist
  //        If true then load ajax, else load from div
  if (typeof dataLoad !== 'undefined' && dataLoad !== false)
  {
    //Load content ajax
    wizardContent.load(dataLoad);
  }
  else
  {
    wizardContent.html(elementFor.html());
  }
}

function loadDataOnClick()
{
  var wizardButtons = $('.wizard-menu .list-group-item');
  var wizardContent = $('.wizard-content');

  wizardButtons.on('click', function(event) {
    event.preventDefault();
    //Change active state
    wizardButtons.removeClass('active');
    $(this).addClass('active');


    //Get "data-for" attribute and find element
    var dataFor = $(this).attr('data-for');
    var elementFor = $(dataFor);

    var dataLoad = elementFor.attr('data-load');

    //        Check if attribute does exist
    //        If true then load ajax, else load from div
    if (typeof dataLoad !== 'undefined' && dataLoad !== false)
    {
      //Load content ajax
      wizardContent.load(dataLoad);
    }
    else
    {
      wizardContent.html(elementFor.html());
    }
  });
}

.container {
    margin-top: 1%;
}

.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
    background-color: #7aba7b;
    border-color: #7aba7b;
    color: #ffffff;
}

.list-group-item.success > h4 {
    color: #ffffff;
}

.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
    background-color: #d59392;
    border-color: #d59392;
    color: #ffffff;
}

.list-group-item.error > h4 {
    color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/my-style.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="list-group wizard-menu">

          <a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
            <h4 class="list-group-item-heading">Registro de Produtos</h4>
          </a>
          <a href="#" class="list-group-item step-2-menu" data-for=".step-2">
            <h4 class="list-group-item-heading">Acessoria da Empresa</h4>
          </a>
          <a href="#" class="list-group-item step-3-menu" data-for=".step-3">
            <h4 class="list-group-item-heading">Acessoria Juridica</h4>
          </a>
          <a href="#" class="list-group-item step-4-menu" data-for=".step-4">
            <h4 class="list-group-item-heading">Acessoria Contabil</h4>
          </a>
          <a href="#" class="list-group-item step-5-menu" data-for=".step-5">
            <h4 class="list-group-item-heading">Acessoria Pos Mercado</h4>
          </a>

        </div>
      </div>

      <div class="col-md-8">
        <div class="well wizard-content"></div>
        <div class="hide">
          <div class="step-1">
            <h3>Registro de produtos</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-2">
            <h3>Acessoria da Empresa</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-3">
            <h3>Acessoria Juridica</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-4">
            <h3>Acessoria Contabil</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-5">
            <h3>Acessoria Pos Mercado</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/my-action.js" type="text/javascript"></script>
</body>
</html>