CODEWITHSUNDEEP
jqueryhtmlcss
Brad
Brad

Reputation: 479

Clicking next to display next div

I have a 'tooltip' using divs, basically, when the client clicks what tooltip they want to see, this then displays and works well between the 3 tooltips.

However, I am struggling as to when the client clicks 'Next' once within a tooltip, I want that tooltip to hide and the next tooltip ID to show.

E.g. If they have clicked to see tooltip1, if they click next in tooltip 1, this will hide tooltip 1 and show tooltip2. Also of course we want to reverse this when the user clicks back.

Please see my Codepen example:- https://codepen.io/scottYg55/pen/mNbqyj

  <div class="a-div">
    <div id="tooltip1" class="tooltip-cont">tooltip 1 show
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
  <div>

  <div class="testtest">
   <div class="b-div">
      <div id="tooltip2" class="tooltip-cont">tooltip 2 show 
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
    <div>
  </div>

  <div class="testtestt">
   <div class="c-div">
      <div id="tooltip3" class="tooltip-cont">tooltip 3 show
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
    <div>
  </div>

       <ul>
           <li>
             <div class="help-tip" data-id="tooltip1">Tooltip 1
             </div>
           </li>
           <li>
             <div class="help-tip" data-id="tooltip2">Tooltip 2
             </div>
           </li>
             <li>
             <div class="help-tip" data-id="tooltip3">Tooltip 3
             </div>
           </li>
       </ul>

CSS

    .tooltip-cont {display:none;}
    .show {display:block;}

JQuery

$(".help-tip").on('click', function() {
  $('.tooltip-cont').removeClass("show");
  $('#' + $(this).data('id')).toggleClass('show');
});

$(".next").on("click", function() {
    $(this).parent().fadeOut(500);
    $(this).find('.tooltip-cont').addClass("show");
});

Upvotes: 0

Views: 140

Answers (2)

maga42
maga42

Reputation: 63

Different approach

jQuery:

let index = 0;
$(".help-tip").on('click', function() {
   $('#showtooltipid').text($(this).data('id'))
});

$(".next, .back").on("click", function() {
$('#showtooltipid').text($(".help-tip").eq(index).data('id'))
    $(this).find('.tooltip-cont').addClass("show");
    index = $(this).hasClass('next') ? index + 1 : index - 1;
    if (index > 2) {
        index = 0;
    }
    if (index < 0) {
       index = 2;
    }
});

Html:

      <div class="a-div">
    <span id="showtooltipid"></span>
    <div id="tooltip1" class="tooltip-cont">
        <div class="next">NEXT</div>
        <div class="back">BACK</div>
     </div>
  <div>
  <ul>
    <li>
      <div class="help-tip" data-id="tooltip1">Tooltip 1</div>
    </li>
    <li>
     <div class="help-tip" data-id="tooltip2">Tooltip 2
             </div>
           </li>
             <li>
             <div class="help-tip" data-id="tooltip3">Tooltip 3
             </div>
           </li>
       </ul>

Upvotes: 0

mocni_T
mocni_T

Reputation: 179

In order to know what is next or previus tooltip you need to track active id var activeToolTipId = 0, we will save value here so we can later know what is next or previus tooltip.

This is function for showing some tooltip.

function showToolTipWithId(id) {
   activeToolTipId = id;
   $toolTip.hide(); 
   $("#tooltip" + id).show();
}

This below is just helper for next and back click, that will just update to show new tooltip.

$(".help-tip").on('click', function () {
   var id = $(this).data('id');
   showToolTipWithId(id);
});

$('.next').on('click', function () { 
   if (activeToolTipId < 3) {
   var id = activeToolTipId + 1;
   showToolTipWithId(id);
   }
});

$('.back').on('click', function () {
   if (activeToolTipId > 1) {
   var id = activeToolTipId - 1;
   showToolTipWithId(id);
 }
});

Demo link: https://codepen.io/Mocni/pen/YmKENj?editors=1010

Upvotes: 1

Related Questions