Question 245022 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I center my selected accordion item using jQuery?

I attempted using `this.scrollIntoView({behavior: "smooth"}), however I was getting very inconsistent results with where the selected item would land. I suspect I need to somehow use scrollTop(), but I am very new to jQuery and am a bit overwhelmed on the different potential solutions.

Here is a working codepen link:
https://codepen.io/boingloings33/pen/JjwWQpE

Thank you.

Script.js

jQuery(function () {
  $(".head").on("click", function () {
    let isActive = $(this).hasClass("active");

    $(".head").removeClass("active");
    $(".head").parent().find(".content").slideUp(280);
    $(".head").parent().find(".arrow").removeClass("arrow-animate");
    if (isActive === false) {
      $(this).addClass("active");
      $(this).parent().find(".arrow").addClass("arrow-animate");
      $(this).parent().find(".content").slideDown(280);
    }
  });
});

index.html

<div class="container">
  <div class="accordion" id="accordion-1">
    <div class="head">
      <h2>Number 1</h2>
    </div>
    <div class="content">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-2">
    <div class="head">
      <h2>Number 2</h2>
    </div>
    <div class="content">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-3">
    <div class="head">
      <h2>Number 3</h2>   
    </div>
    <div class="content">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />

  <div class="accordion" id="accordion-4">
    <div class="head">
      <h2>Number 4</h2>
    </div>
    <div class="content">     
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <br />   
 
  <div class="accordion" id="accordion-5">
    <div class="head">
      <h2>Number 5</h2>
    </div>
    <div class="content">     
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
  
</div>

<script src="script.js"></script>

styles.css

body {
  font-family: Lato;
  background: rgb(142, 215, 213);
  overflow-y: scroll;
}

#content::-webkit-scrollbar {
  display: none;
}

strong {
  color: #ffffff;
  font-size: 56px;
}

.content p {
  font-size: 18px;
  font-weight: 600;
}
.container {
  width: 100%;
  margin: 0 auto;
  width: 800px;
}

.preview-pics {
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.3;
  filter: blur(3px);
  transition: 0.2s ease;
}

.preview-pics:hover {
  opacity: 1;
  filter: blur(0);
}

.accordion {
  box-shadow: 0px 1px 7px #dbdbdb;
}

.accordion .head {
  background-color: #ffffff;
  color: #563e6e;
  padding: 20px 30px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion .head:hover,
.accordion .active {
  background-color: #ffe77aff;
}

.accordion .arrow-animate {
  transform: rotate(-180deg);
  opacity: 1;
}

.accordion .content {
  background-color: #ffffff;
  display: none;
  padding: 20px 30px;
  color: #333333;
}

#accordion-5 {
  margin-bottom: 48px;
}
Tags:

2

Answers


  1. 0

    I changed your slideDown method and added a scrollTop animation for the selected item to the most center position of your screen. You maybe need some more items to test it properly.

    const item = $(this)
$(this).parent().find(".content").slideDown(280, function () {
    $('html, body').stop().animate({
        scrollTop: item.offset().top + item.parent().height() / 2 - $(window).height() / 2
    })
});
    Login or Signup to reply.
  2. 0

    Trying to do this while the elements are still opening/closing, probably makes rather little sense – will be hard to land on any consistent position with that. You could try and do it in the callback function for the slideDown animation:

    $(this).parent().find(".content").slideDown(280, function() {
  this.closest('.accordion').scrollIntoView({
    behavior: "smooth",
    block: "center"
  });
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search