Allow to toggle items when looping through using jQuery

Question

Hi so I have the following

$(document).ready(function() {
  const mq = window.matchMedia("(min-width: 992px)");

  if (mq.matches) {
    $(".section-a .block").click(function() {
      $(".active")
        .removeClass("active")
        .next()
        .show()
        .addClass("active");
    });
  }
});

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

:root {
  --lightBlack: #716d8e;
  --deepPurple: #4c4760;
  --lightGrey: #9aa3a7;
  --orange: #f6921e;
  --purple: #90278e;
  --black: #4c495f;
  --white: #ffffff;
  font-size: 100%;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Barlow', sans-serif;
  scroll-behavior: smooth;
  font-weight: 400;
  font-size: 15px;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

@media(min-width: 992px) {
  .section-a {
    padding-bottom: 90px;
    margin-left: 81px;
  }

  .section-a .masthead { padding-bottom: 102px; }
  .section-a .masthead p { width: 709px; }

  .section-a .block {
    transition: all 0.5s ease-in-out;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: -webkit-flex;
    flex-direction: row;
    display: -ms-flex;
    display: flex;
    height: auto;
  }

  .section-a .block.ptr,
  .section-a .block.pbl,
  .section-a .block.pls { margin-bottom: 21px; }

  .section-a .block .imagery {
    position: relative;
    display: none;
    width: 60%;
    order: 1;
    right: 0;
    top: 0;
  }

  .section-a .block .imagery img { position: absolute; }

  .section-a .block.ptr .imagery img {
    max-width: 80%;
    top: -37%;
  }

  .section-a .block.pbl .imagery img {
    margin-left: -95px;
    max-width: 60%;
    top: -95px;
  }

  .section-a .block.pls .imagery img {
    margin-left: -90px;
    max-width: 70%;
    top: -240px;
  }

  .section-a .block.ptr2 .imagery img {
    max-width: 100%;
    top: -179%;
  }

  .section-a .block .content h2 { color: var(--lightGrey); }

  .section-a .block p {
    color: var(--black);
    display: none;
    width: 269px;
  }

  .section-a .block .content { padding-left: 17.5px; }
  .section-a .block .top { padding-bottom: 0; }

  /* ACTIVE */
  .section-a .block:hover { cursor: pointer; }

  .section-a .block.ptr.ptr1.active,
  .section-a .block.pbl.active,
  .section-a .block.pls.active,
  .section-a .block.ptr.ptr2.active {
    border-left: 2px solid var(--purple);
    margin-bottom: 39px;
    cursor: pointer;
  }

  .section-a .block.ptr.ptr1.active h2,
  .section-a .block.pbl.active h2,
  .section-a .block.pls.active h2,
  .section-a .block.ptr.ptr2.active h2 { color: var(--purple); }

  .section-a .block.ptr.ptr1.active p,
  .section-a .block.pbl.active p,
  .section-a .block.pls.active p,
  .section-a .block.ptr.ptr2.active p,
  .section-a .block.ptr.ptr1.active .imagery,
  .section-a .block.pls.active .imagery,
  .section-a .block.pbl.active .imagery,
  .section-a .block.ptr.ptr2.active .imagery { display: block; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- section a -->
  <section class="section-a">
    <div class="container">
      <div class="masthead">
        <h1>Never lose the thread of conversation again.</h1>
        <p>Love Slack threads, but hate getting lost in all the updates? Relax, Threadbot’s got this. It’s your team’s intelligent messaging assistant. </p>
      </div>

      <section class="block ptr ptr1 active">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Prioritize-1.png" alt="threadbot desktop" class="always-on">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Prioritize, or snooze. You choose.</h2>
          <p>Not all threads are equal. Now you can prioritize each one so you know what to tackle first. Overwhelmed? Hit the snooze option. Share your thread priorities with your team to sync your efforts.</p>
        </div>
      </section>

      <section class="block pbl">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Sorted-2.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Get sorted.</h2>
          <p>Go way beyond the default 'All Threads' view. Zero in on what you want fast with Threadbot’s rich thread sorting options. Sort by channel, recent activity, priority (yours or others) and more.</p>
        </div>
      </section>

      <section class="block pls">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Thread-3.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Thread your email into Slack.</h2>
          <p>Constantly toggling back and forth between Slack and your email client? Pull your mail into a private channel and reply to emails right from Slack. See related emails with one click.
            Save time and focus your mind.</p>
        </div>
      </section>

      <section class="block ptr ptr2">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Snippets-4.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Share email snippets to a new thread.</h2>
          <p>Are you copy-pasting emails to share with colleagues? Put productivity back in your inbox. Threadbot starts a new thread for each email snippet or attachment you share, keeping things focused and easily trackable.</p>
        </div>
      </div>
    </section>
  </section>

I'm toggling through each block on click by adding and removing an active class, all is working fine, however, I want the user to be able to click an item again so there is always one item showing in the loop, I don't want it just to stop when it's finished going through all items.

Any help with this would be great, thanks.

Answer 1

Set a variable to indicate whether you've gone through the whole list. So while it's cycling you just go to the next one. After the cycle is done, it toggles.

$(document).ready(function() {
  const mq = window.matchMedia("(min-width: 992px)");
  let loopDone = false;
  if (mq.matches) {
    $(".section-a .block").click(function() {
      if (!loopDone) {
        $(".active")
          .removeClass("active")
          .next()
          .show()
          .addClass("active");
        if ($(".active").length == 0) {
          loopDone = true;
        }
      } else {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active")
            .next().addClass("active");
        } else {
          $(".active").removeClass("active");
          $(this).addClass("active");
        }
      }
    });
  }
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --lightBlack: #716d8e;
  --deepPurple: #4c4760;
  --lightGrey: #9aa3a7;
  --orange: #f6921e;
  --purple: #90278e;
  --black: #4c495f;
  --white: #ffffff;
  font-size: 100%;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Barlow', sans-serif;
  scroll-behavior: smooth;
  font-weight: 400;
  font-size: 15px;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

@media(min-width: 992px) {
  .section-a {
    padding-bottom: 90px;
    margin-left: 81px;
  }
  .section-a .masthead {
    padding-bottom: 102px;
  }
  .section-a .masthead p {
    width: 709px;
  }
  .section-a .block {
    transition: all 0.5s ease-in-out;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: -webkit-flex;
    flex-direction: row;
    display: -ms-flex;
    display: flex;
    height: auto;
  }
  .section-a .block.ptr,
  .section-a .block.pbl,
  .section-a .block.pls {
    margin-bottom: 21px;
  }
  .section-a .block .imagery {
    position: relative;
    display: none;
    width: 60%;
    order: 1;
    right: 0;
    top: 0;
  }
  .section-a .block .imagery img {
    position: absolute;
  }
  .section-a .block.ptr .imagery img {
    max-width: 80%;
    top: -37%;
  }
  .section-a .block.pbl .imagery img {
    margin-left: -95px;
    max-width: 60%;
    top: -95px;
  }
  .section-a .block.pls .imagery img {
    margin-left: -90px;
    max-width: 70%;
    top: -240px;
  }
  .section-a .block.ptr2 .imagery img {
    max-width: 100%;
    top: -179%;
  }
  .section-a .block .content h2 {
    color: var(--lightGrey);
  }
  .section-a .block p {
    color: var(--black);
    display: none;
    width: 269px;
  }
  .section-a .block .content {
    padding-left: 17.5px;
  }
  .section-a .block .top {
    padding-bottom: 0;
  }
  /* ACTIVE */
  .section-a .block:hover {
    cursor: pointer;
  }
  .section-a .block.ptr.ptr1.active,
  .section-a .block.pbl.active,
  .section-a .block.pls.active,
  .section-a .block.ptr.ptr2.active {
    border-left: 2px solid var(--purple);
    margin-bottom: 39px;
    cursor: pointer;
  }
  .section-a .block.ptr.ptr1.active h2,
  .section-a .block.pbl.active h2,
  .section-a .block.pls.active h2,
  .section-a .block.ptr.ptr2.active h2 {
    color: var(--purple);
  }
  .section-a .block.ptr.ptr1.active p,
  .section-a .block.pbl.active p,
  .section-a .block.pls.active p,
  .section-a .block.ptr.ptr2.active p,
  .section-a .block.ptr.ptr1.active .imagery,
  .section-a .block.pls.active .imagery,
  .section-a .block.pbl.active .imagery,
  .section-a .block.ptr.ptr2.active .imagery {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- section a -->
<section class="section-a">
  <div class="container">
    <div class="masthead">
      <h1>Never lose the thread of conversation again.</h1>
      <p>Love Slack threads, but hate getting lost in all the updates? Relax, Threadbot’s got this. It’s your team’s intelligent messaging assistant. </p>
    </div>

    <section class="block ptr ptr1 active">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Prioritize-1.png" alt="threadbot desktop" class="always-on">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Prioritize, or snooze. You choose.</h2>
        <p>Not all threads are equal. Now you can prioritize each one so you know what to tackle first. Overwhelmed? Hit the snooze option. Share your thread priorities with your team to sync your efforts.</p>
      </div>
    </section>

    <section class="block pbl">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Sorted-2.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Get sorted.</h2>
        <p>Go way beyond the default 'All Threads' view. Zero in on what you want fast with Threadbot’s rich thread sorting options. Sort by channel, recent activity, priority (yours or others) and more.</p>
      </div>
    </section>

    <section class="block pls">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Thread-3.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Thread your email into Slack.</h2>
        <p>Constantly toggling back and forth between Slack and your email client? Pull your mail into a private channel and reply to emails right from Slack. See related emails with one click. Save time and focus your mind.</p>
      </div>
    </section>

    <section class="block ptr ptr2">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Snippets-4.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Share email snippets to a new thread.</h2>
        <p>Are you copy-pasting emails to share with colleagues? Put productivity back in your inbox. Threadbot starts a new thread for each email snippet or attachment you share, keeping things focused and easily trackable.</p>
      </div>
  </div>
  </section>
</section>