How can I allow a particular section to have multiple choices?

Question

I work in stages, and I am so grateful that I have already received a lot of help from others. I still do not ask though!

My steps are divided into different ones <section>, and I would like to give <section>a class="multiple"that this particular section has several options. I use .selectedto determine if a value is selected <li>or not.

This is my current code:

$('li').on('click', function(e) {
   e.preventDefault();
   // remove selected class from links after the current one
   $(this).closest('section').nextAll('section').find('li').removeClass('selected');
   // remove selected from siblings, toggle current selected class
   $(this).siblings('li').removeClass('selected').end().toggleClass('selected');
   var $target = $('#' + $(this).attr('data-id'));
   if ($target.length) {
       // hide any steps after the current one that may be shown
       $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
       // toggle display of selected step
       $target.toggleClass('active', $(this).hasClass('selected'));
   } else {
       console.log('do something else to end this thing');
   }
})

So my question is: what can I do with my code to make <section class="multiple>it possible for multiple selected elements?

This is my JSFiddle . Click on the items to get the last step, which should be a section that allows several choices.

Thanks for the help.

Answer 1

.multiple .selected li. https://jsfiddle.net/979aL2g5/7/

$('li').on('click',function(e) {
  e.preventDefault();
  var $parent = $(this).closest('section')
  // remove selected class from links after the current one
  $parent.nextAll('section').find('li').removeClass('selected');
  // remove selected from siblings, toggle current selected class
  $(this).toggleClass('selected');
  (! $parent.hasClass('multiple')) && $(this).siblings('li').removeClass('selected');
  var $target = $('#'+$(this).attr('data-id'));
  if ($target.length) {
    // hide any steps after the current one that may be shown
    $parent.nextAll('section').find('.step').not($target).removeClass('active');
    // toggle display of selected step
    $target.toggleClass('active', $(this).hasClass('selected')); 
  } else {
    console.log('do something else to end this thing');
  }
})

body { color: #333; }
h1 {
  font-size: 20px;
}
.step {
  display: none;
}
.active {
  display: block;
}
.selected {
  background: #27ae60 !important;
  color: #fff !important;
}
ul {
  padding:0;
}
li {
  list-style: none;
}
.bananas {
  padding: 20px;
  color: #7f8c8d;
  background: #ecf0f1;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}
.bananas.special.selected {
  background: #3498db !important;
}

.hi {
  color: #27ae60;
  border-bottom: 2px dotted #27ae60;
}
h1 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.hi.special {
  border-bottom: 2px dotted #3498db;
  color: #3498db;
}

#same_target {
  margin-top: 30px;
  background: #9b59b6;
  padding: 20px;
  color: #fff;
}

#same_target p {
  margin-bottom:0;
}

.nomarking {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">
  <section>
    <h1>First step, please choose something</h1>
    <ul>
        <li class="bananas nomarking" data-id="one">
          Sprite
        </li>
        <li class="bananas nomarking" data-id="two">
          King Kong
        </li>
        <li class="bananas nomarking" data-id="three">
          Astronauts
        </li>
      </ul>
  </section>

  <section>
    <div id="one" class="step">
    <h1>Second step for <span class="hi">Sprite</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking " data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="two" class="step">
      <h1>Second step for <span class="hi">King Kong</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking" data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="three" class="step">
      <h1>Second step for <span class="hi">Astronauts</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking" data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>
  </section>

  <section class="multiple">
    <div id="third" class="step">
      <h1>Multiple <span class="hi special">selections</span> section - choose under</h1>
      <ul>
        <li class="bananas special nomarking">
          Hamburger
        </li>
        <li class="bananas special nomarking">
          Coffee
        </li>
        <li class="bananas special nomarking">
          Stackoverflow
        </li>
        <li class="bananas special nomarking">
          Australia
        </li>
        <li class="bananas special nomarking">
          Oldschool
        </li>
        <li class="bananas special nomarking">
          Deadpool
        </li>
      </ul>
    </div>
  </section>
</div>

Answer 2

:

• class="single" , $('li .single').on('click',function(e)..., - $('li .multiple').on('click',function(e).... . $(this).siblings('li').removeClass('selected'), .

• , '$ (' li.single '). on ('click', function (e)... ", IF/THEN, , $(this).siblings('li').removeClass('selected'), .multiple

Answer 3

I would change this:

// remove selected from siblings, toggle current selected class
$(this).siblings('li').removeClass('selected').end().toggleClass('selected');

:

// remove selected from siblings if not multiple
if (!$(this).closest('section').hasClass('multiple')) {
    $(this).siblings('li').removeClass('selected');
}
// toggle current selected class
$(this).toggleClass('selected');