JSFiddle - React, Tailwind, and code Playground

by Intesar Haider

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js       "></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>


  <div class="main">
    <div class="accordion">

      <!-- project 1-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="1">Project 1</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>


      <!-- project 2-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="2">Project 2</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>

      <!-- project 3-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="3">Project 3</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>

      <!-- project 4-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="1">Project 4</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>

      <!-- project 5-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="2">Project 5</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>

      <!-- project 6-->
      <div class="accordion-section">
        <a class="accordion-section-title" id="3">Project 6</a>
        <div class="accordion-section-content">
          <div class="gallery"></div>
        </div>
      </div>

    </div>
  </div>

</body>

CSS

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0px 10px 10px 20px;
  overflow-x: hidden;
}

.accordion {
  position: relative;
}

.accordion-section-title {
  display: inline-block;
  margin-bottom: 15px;
  margin-top: 15px;
}

.accordion-section-content {
  position: relative;
  display: none;
}

.gallery {
  position: relative;
  height: 400px;
  width: 400px;
  background-color: red;
}

JavaScript

// THIS FIRST PART IS THE PROBLEM: don't know how to fix it//		

$('.accordion-section-title').each(function() {
	$(this).data('ypos', $(this).offset().top)
})

$('.accordion-section-title').on('click', function (e) {

       var idName = $(this).attr('id');
       $('html, body').animate({
           scrollTop: $("#" + idName).data('ypos') - 10}, 500);
   });
        
        
        
        
      // THIS SECOND PART IS WORKING FINE: NOT THE PROBLEM//

function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(400).removeClass('open');
}
$('.accordion-section-title').on('click', function(e){
        e.preventDefault();
        var currentAttrValue = $(this).next();
        if($(this).is('.active')) {
            close_accordion_section();
            $(currentAttrValue)
  .animate();}
        else {
            close_accordion_section();
            $(this).addClass('active');
            $(currentAttrValue).slideDown(400).addClass('open');
            $(currentAttrValue)
  .css('opacity', 0)
  .animate(
    { opacity: 1 },
    { queue: false, duration: 800 }
  );
        }
});