Accordion

dfdsfds

by 12345

HTML

<body>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

  <div id="content">
    <main class="container-fluid">
      <div class="accordion">
        
        <div class="item">
          <a href="#somelink">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTw36J4uwuabT7hHBNck-W46D11fsVGADW0qhr1OY4zqCl10pzoRUZS8h0" />
          </a>
        </div>
        <div class="item">
          <a href="#somelink">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTBBeT7rtyicUUBrBEgtaeQvodwUfSuXmDR8fuz1x79fDPVJq4HAw" />
          </a>
        </div>
        <div class="item">
          <a href="#somelink">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSPdN8JrvDozLkxCHDOHNzy2CBAMKjlCsgSpzq0sMx4QjERITD0" />
          </a>
        </div>
        <div class="item">
          <a href="#somelink">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdC9d6Z2Al0vMxQRqFc0230CUo-C-1BhIC3I5R9XTFw7MQLdeP" />
          </a>
        </div>
      </div>
    </main>
  </div>
</body>

CSS

.item {
  display: inline-block;
  padding: 0!important;
  margin: 0important;
}

.item a {
  max-width: 100%;
  margin: 0important;
  padding: 0important;
}

.item img {
  margin: 0important;
  padding: 0important;
}

.accordion {
  width: 100%;
  overflow: hidden;
}

JavaScript

jQuery(function($) {

  $.fn.shadeAccordion = function(elmwrap, sliderH) {

    var $this = $(this), //get the slider countiner
      SlideR = $this,
      SliderWidth = SlideR.width(), // slider should inherit parent witdth
      thumbA = SlideR.find('a'), // images should wrap with a tag
      thumbMOunt = thumbA.length, // count the number of images
      thumbImg = thumbA.find('img'); // find  acctual imgaes

    var imgaesWidth = 0;
    thumbImg.each(function(index, el) {
      imgaesWidth += $(el).width();
    });
    console.log(imgaesWidth);
    var margineach = SliderWidth / imgaesWidth;
    console.log(margineach);

    //some CSS Settigns
    SlideR.find(elmwrap).css({
      'transition': 'width .2s ease-in',
      'height': sliderH,
      'overflow': 'hidden',
      'position': 'static'
    }).find('img').css({
      height: sliderH,
      width: 'auto',
      'position': 'relative',
      'max-width': 'none'
    });;

    $.fn.HoverAnimation = function(SliderWidth) {
      var $this = $(this), //get the specific hoverd container
        imgWid = $this.data('orginalwidht'), //actual image width for this cont
        sliderWidthAfterOpen = SliderWidth - imgWid,
        thumbImgSibDiv = $this.siblings(elmwrap);


      var sibImgaesWidth = 0;
      thumbImgSibDiv.each(function(index, el) {
        sibImgaesWidth += $(el).width();
      });
      var margineachOpend = sliderWidthAfterOpen / sibImgaesWidth;


      $this.addClass('active').width(imgWid).css('opacity', '1');

      thumbImgSibDiv.addClass('inactive').each(function() {
        var thisW = $(this).width();
        $(this).width(thisW * margineachOpend).css('opacity', '0.4');
      });

    }; //End of mouse over

    $.fn.LeaveAnimation = function(SliderWidth) {
      var $this = $(this),
        imgWid = $this.data('editedwidth');

      $this.removeClass('active').width(imgWid);
      SlideR.find(elmwrap).css('opacity', '0.4').not('.active').removeClass('inactive').each(function() {
      ...