How to change bootstrap responsive style?

Question

We are planing to change the responsive nature of bootstrap in other manner . Please see the current html

$(function () {
	$('.panel-title a').on('click', function () {
  	$(this).closest('.panel').siblings().toggle();
   });
 });

.panel-title a {
  display: block;
  text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
  text-decoration: none;
}
.panel-title a:before {
  content: "<";
  position: absolute;
  left: 30px;
}
.panel-title a.collapsed {
  text-align: left;
}
.panel-title a.collapsed:before {
  content: "";
}
.panel-title a.collapsed:after {
  content: ">";
  position: absolute; 
  right: 30px;
}

.panel-body {
  animation: shake;
  animation-duration: 1s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div>
        
        
        <div class="col-md-6   col-sm-6 col-xs-12">
        
                   <div class="panel-group" id="accordion">
                    <div class="panel panel-default  panel1">
                      <div class="panel-heading">
                        <h4 class="panel-title wobble">
                          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a>
                        </h4>
                      </div>
                      <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>
                        </h4>
                      </div>
                      <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a>
                        </h4>
                      </div>
                      <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                       
                       <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a>
                        </h4>
                      </div>
                      <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                  </div>
        
        </div>

Here when window is resized or view in mobile devise the list group is showing like these . Please see the image

But we need to change this .When window is resized and it's width is less than some amount then we want to show a arrow or settings icon on the right side part of the window (right side of the image).

Please see the desired output

When we click on the settings icon then the image is replaced by content in the list group with close icon. So that user can see the list group in full window without image and he can operate all action. After this he can close that list group by clicking close button. Please help to resolve this.

Answer 1

When window is resized and it's width is less than some amount then we want to show a arrow or settings icon on the right side part of the window (right side of the image).

This can be accomplish by adding an element with the desired icon and using Bootstrap's helper class of visible-xs like:

<span id="toggle" class="visible-xs"><i class="fa fa-cog fa-2x"></i></span>

And add hidden-xs to the right column so that the tab accordions don't show at the same xs screen resolutions.

You'll then need to use $(window).width() to detect the window size and if the window size is a certain size or less, it will allow the trigger (click) of the cog icon to hide the image and show the tab content.

If you increase the size, the image reappears with the tabs to the right.

Edit

After this he can close that list group by clicking close button.

I see what you're wanting to do now.

So, first I changed the font icon to the icon matching your image.

<span id="toggle" class="visible-xs"><i class="fa fa-plus-square fa-2x">

The click trigger initially would only work if you had resized the window. You can add the same click event outside the .resize() function to correct that. (see the comments in the updated JS)

So that the user can hide and show (toggle) between the tabs and image, you will use .toggle() and to change the icon image use .toggleClass()

$(this).children().toggleClass('fa-plus-square fa-minus-square');

Note: Keep the .resize() function in there so that it all still works when resizing the window on larger screens. As Ron pointed out, I also fixed the .resize() function to behave the same.

instead of shake how can i change animation to Slide toggle from right to left

TLDR;

@keyframes allows you to control the intermediate steps in a CSS animation sequence by establishing waypoints along the animation (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes). I've added a slideInRight keyframe rule for you to see the differences between that and the shake. I suggest reading up on @keyframes if you're looking to implement this kind of stuff into your projects so that you can create your own in the future.

$(function() {
  $('.panel-title a').on('click', function() {
    $(this).closest('.panel').siblings().toggle();
  });

  // this takes care of screensizes that start off at small sizes
  // like tablets or mobile devices
  $('#toggle').on('click', function() {
    $(this).children().toggleClass('fa-plus-square fa-minus-square');
    $(this).prev().toggle();
    $(this).closest('div').siblings().toggleClass('hidden-xs');
  });

  // provide the same size affect and fall back on desktop sizes
  // when resizing window.
  $(window).resize(function() {
    var windowSize = $(window).width();
    if (windowSize < 768) { // BS breaking point for -xs
      $('#toggle').on('click', function() {
        $(this).children().toggleClass('fa-plus-square fa-minus-square');
        $(this).prev().toggle();
        $(this).closest('div').siblings().toggleClass('hidden-xs');
      });
    } else {
      $('#toggle').prev().show();
      $('#toggle').closest('div').siblings().addClass('hidden-xs');
    }
  });

});

.panel-title a {
  display: block;
  text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
  text-decoration: none;
}
.panel-title a:before {
  content: "\f177";
  font-family: "FontAwesome";
  position: absolute;
  left: 30px;
}
.panel-title a.collapsed {
  text-align: left;
}
.panel-title a.collapsed:before {
  content: "";
}
.panel-title a.collapsed:after {
  content: "\f054";
  font-family: "FontAwesome";
  position: absolute; 
  right: 30px;
}

.panel-body {
  animation: slideInRight;
  animation-duration: 1s;
}
.img-container {
  margin-bottom: 50px;  
}
#toggle {
  position: fixed;
  top: 10px;
  right: 20px;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12 col-sm-6 col-md-6 img-container" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> 
   <span id="toggle" class="visible-xs"><i class="fa fa-plus-square fa-2x"></i></span>
   </div>
        
        <div class="col-xs-12 col-sm-6 col-md-6 hidden-xs">
        
                   <div class="panel-group" id="accordion">
                    <div class="panel panel-default  panel1">
                      <div class="panel-heading">
                        <h4 class="panel-title wobble">
                          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a>
                        </h4>
                      </div>
                      <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>
                        </h4>
                      </div>
                      <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a>
                        </h4>
                      </div>
                      <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                       
                       <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a>
                        </h4>
                      </div>
                      <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
                      </div>
                    </div>
                  </div>
        
        </div>