0

How to make such a thing: when one clicks on a title (year) , the whole sections hides/rolls up (like a spoiler effect). And at the same time there can be hidden not only the active section but any sections (more than 1). Thank you in advance!

Unfortunately, my js skills are too low and I can't solve my issue on my own.

(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

 
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();
.timeline {
  padding: 0;
}

section.timeline h3 {
  margin-left: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #00304c;
  border-bottom: 2px solid rgba(0, 48, 76, 0);
}

section.timeline h4 {
  display: block;
  margin: 0px 0px 15px 0px;
  letter-spacing: -1.3px;
}

section.widget {
  padding: 0;
}

.timeline ul {}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  background: rgba(0, 75, 121, 0.36);
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120px;
  height: 1px;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 760px;
  padding: 0px 15px 15px 15px;
  content: '';
}

.timeline ul li div::before {}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #14B2B5 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #14B2B5;
}

ul.timeline {
  margin: 0px;
}


/* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: rgba(255, 223, 67, 0.85);
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2017</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2016</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2015</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2014</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2013</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
Morgari
  • 524
  • 2
  • 8
  • 24

1 Answers1

1

Something like this,

$('.year').click(function(){
   $(this).parents('section.timeline').hide(300);
})


(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

$('.year').click(function(){
  $(this).parents('section.timeline').hide(300);
})
.timeline {
  padding: 0;
}

section.timeline h3 {
  margin-left: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #00304c;
  border-bottom: 2px solid rgba(0, 48, 76, 0);
}

section.timeline h4 {
  display: block;
  margin: 0px 0px 15px 0px;
  letter-spacing: -1.3px;
}

section.widget {
  padding: 0;
}

.timeline ul {}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  background: rgba(0, 75, 121, 0.36);
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120px;
  height: 1px;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 760px;
  padding: 0px 15px 15px 15px;
  content: '';
}

.timeline ul li div::before {}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #14B2B5 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #14B2B5;
}

ul.timeline {
  margin: 0px;
}


/* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: rgba(255, 223, 67, 0.85);
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2017</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2016</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2015</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2014</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2013</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68