How To Change Bootstrap Responsive Style?

We are planing to change the responsive nature of bootstrap in other manner . Please see the current html Here when window is resized or view in mobile devise the list group is

Solution 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:

<spanid="toggle"class="visible-xs"><iclass="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-titlea {
  display: block;
  text-align: center;
}
.panel-titlea:active,
.panel-titlea:focus,
.panel-titlea:hover {
  text-decoration: none;
}
.panel-titlea:before {
  content: "\f177";
  font-family: "FontAwesome";
  position: absolute;
  left: 30px;
}
.panel-titlea.collapsed {
  text-align: left;
}
.panel-titlea.collapsed:before {
  content: "";
}
.panel-titlea.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;
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><divclass="col-xs-12 col-sm-6 col-md-6 img-container"style="overflow:hidden"><imgsrc="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"><spanid="toggle"class="visible-xs"><iclass="fa fa-plus-square fa-2x"></i></span></div><divclass="col-xs-12 col-sm-6 col-md-6 hidden-xs"><divclass="panel-group"id="accordion"><divclass="panel panel-default  panel1"><divclass="panel-heading"><h4class="panel-title wobble"><adata-toggle="collapse"data-parent="#accordion"id="tab1"href="#collapse1"class="collapsed">Tab1</a></h4></div><divid="collapse1"class="panel-collapse collapse"><divclass="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><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapse2"class="collapsed">Tab2</a></h4></div><divid="collapse2"class="panel-collapse collapse"><divclass="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><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapse3"class="collapsed">Tab3</a></h4></div><divid="collapse3"class="panel-collapse collapse"><divclass="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><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapse4"class="collapsed">Tab4</a></h4></div><divid="collapse4"class="panel-collapse collapse"><divclass="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>