[Solved] swapping div content using jquery [closed]

by


Here’s my take:

http://jsfiddle.net/bxmaqtd3/

When the button is clicked on the left, we need the div on the right to change content.

My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, #slide2, #slide3, etc) and use the css display: none on all slides except the first (or default) slide.

This solution uses a custom data attribute to store the ID of the slide div which you want the given button to show. For example:

<div class="bt_wrap" name="1" data-slide="slide1">

When the button on the left is active, I want the styling to remain what it looks like when it’s hovered.

To achieve this I duplicate the :hover styles into a new class called active when you click on one of the button divs it removes the class from all buttons and then adds the class to the button you have just clicked.

JS:

$('.bt_wrap').click(function(){
    $('.bt_wrap').removeClass('active'); //remove active class on all buttons
    $(this).addClass('active'); //add active class to the one that you clicked 

  var slideId = $(this).attr('data-slide'); //find the value of the associated slide id 

  $('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show

  $("#" + slideId).show(); //show the one you want to show

});

CSS:

#slide1 {
  display: block;
}

#slide2 {
  display: none;
}

.active .box {
   transform: rotateY(-90deg);
}

.active {
    background: blue;
}

HTML:

<head>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/51086958/path/to/font-awesome/css/font-awesome.min.css">
</head>

<div class="main">
  <div id="wrapper" class="steps">
    <div class="bt_wrap" name="1" data-slide="slide1">
      <div class="box">
        <i class="icon fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="2" data-slide="slide2">
      <div class="box">
        <i class="icon fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="3">
      <div class="box">
        <i class="icon fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="4">
      <div class="box">
        <i class="icon fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="5">
      <div class="box">
        <i class="icon fa fa-file-pdf-o"></i>
        <i class="icon2 fa fa-file-pdf-o"></i>
      </div>
    </div>
  </div>
  <div class="content">
    <div id="slide1" class="slide form-container">
      <h2 class="form-title">Welcome to Your Employment Guide!</h2>
      <h4>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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
      <div class="text-center">
        <input type="button" value="NEXT" class="btn btn-primary next">
      </div>
    </div>

    <div id="slide2" class="slide form-container">
      <h2 class="form-title">Some other title</h2>
      <h4>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. </h4>
      <div class="text-center">
        <input type="button" value="NEXT" class="btn btn-primary next">
      </div>
    </div>
  </div>
</div>

solved swapping div content using jquery [closed]