CODEWITHSUNDEEP
javascripthtmljquerycss
Kenken
Kenken

Reputation: 197

Back button to show previous ul with jquery

I made a questionnaire to help people where should they go when they have a certain type of ticket. Right now I'm having trouble with make the "Back" button to show the previous "ul" or screen that the user seen. At first I'm going to remove the 'active' class of the current "ul" but it won't work. Could show me how to make the back button ?
Thanks
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js.js"></script>

  </head>
  <body>
    <section class="question_wrapper">

      <ul class="tab active">
        <li class="active">
          <p>Do you have a ticket ?</p>
          <a href="#tab1">yes</a>
          <a href="#tab2">no</a>
        </li>
      </ul>

      <ul class="tab" id="tab1">
        <li>
          <p>Which Ticket do you have ?</p>
          <a href="#tab3">Type 1</a>
          <a href="#tab3">Type 2</a>
          <a href="#tab3">Type 3</a>
          <a href="#tab4">Type 4</a>
          <a href="#tab4">Type 5</a>
          <a href="#tab5">Type 6</a>
          <button type="button">Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab2">
        <li>
          <p>Go buy some ticket then</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab3">
        <li>
          <p>Please go to hall A</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab4">
        <li>
          <p>Please go to hall B</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab4">
        <li>
          <p>Please go to hall C</p>
          <button>Back</button>
        </li>
      </ul>

    </section>

  </body>
</html>

CSS

.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab {
  display: none;
}
.tab.active {
  display: flex;
}

JS/JQuery

$(document).ready(function(){
  $(function() {
    $(".tab a").click(function() {
      $(this).parent().addClass("active").siblings(".active").removeClass("active");
      var tabContents = $(this).attr("href");
      $(tabContents).addClass("active").siblings(".active").removeClass("active");
      return false;
    });
  });

  $(":button").on("click", function(){
    $(this).parent().removeClass("active");
  });

});

Upvotes: 1

Views: 583

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

I have made a few changes to the button click.

  • $(':button') to $('button')
  • On click, remove active classname from all ul except the first ul

There is a mistake I found in your code that I found, which is you are using only one li in each ul, but for each items under ul, you should be using a li and if you need more elements, you can use them.

Update

Updated the snippet with the functionality to go back to previous ul instead of the first one.

I am keeping an additional attribute with each ul to identify the level they are in, so when I click on the back button, I am identifying the currentLevel and finding the next one using the currentLevel.

$(document).ready(function(){
  $(function() {
    $(".tab a").click(function() {
      $(this).parent().addClass("active").siblings(".active").removeClass("active");
      var tabContents = $(this).attr("href");
      $(tabContents).addClass("active").siblings(".active").removeClass("active");
      return false;
    });
  });

  $("button").on("click", function(){
    let currentLevel = $(this).closest('.tab').attr('data-level');
    let prevLevel = parseInt(currentLevel) - 1;
    $('.tab').removeClass("active");
    $('.tab').each(function(index, item) {
      if(parseInt($(item).attr('data-level')) === prevLevel) {
        $(item).addClass('active');
      }
    })
  });
});
.question_wrapper {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  border: 1px solid black;
  text-align: center;
  padding-left: 0;
  width: 40rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab {
  display: none;
}
.tab.active {
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="question_wrapper">

      <ul class="tab main-tab active" data-level='1'>
        <li class="active">
          <p>Do you have a ticket ?</p>
          <a href="#tab1">yes</a>
          <a href="#tab2">no</a>
        </li>
      </ul>

      <ul class="tab" data-level='2' id="tab1">
        <li>
          <p>Which Ticket do you have ?</p>
          <a href="#tab3">Type 1</a>
          <a href="#tab3">Type 2</a>
          <a href="#tab3">Type 3</a>
          <a href="#tab4">Type 4</a>
          <a href="#tab4">Type 5</a>
          <a href="#tab5">Type 6</a>
          <button type="button">Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab2" data-level='3'>
        <li>
          <p>Go buy some ticket then</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab3" data-level='3'>
        <li>
          <p>Please go to hall A</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab4" data-level='3'>
        <li>
          <p>Please go to hall B</p>
          <button>Back</button>
        </li>
      </ul>

      <ul class="tab" id="tab5" data-level='3'>
        <li>
          <p>Please go to hall C</p>
          <button>Back</button>
        </li>
      </ul>

    </section>

Upvotes: 1

Related Questions