iWillGetBetter iWillGetBetter - 2 months ago 29
CSS Question

Switch tabs by jquery hover, add remove class{display:none}

I have a 3 components that I wish to toggle display.

The toggle mechanic I wish to have is:


  1. Only one #wrap is in display at any point of time. Default can be any #wrap.

  2. Once mouse detected hovering in category1, wrap1 will display and wrap2 and wrap3 will be hidden. Same for category2, category3.

  3. Mouse can then leave category1 but wrap1 will still be in display. Same for category2, category3.

  4. Once mouse detected hovering in another category, the corresponding wrap will take over and be the new "active" display.

  5. Basically the active display is "activated" by a hover over the category div.

  6. I have provided a jsfiddle, code might be too long to paste here.



Right now the javascript code looks fine but it does not work at all. Appreciate any help thanks!

(function($) {
"use strict"; // Start of use strict

$("#catbox1").mouseenter( function () {
$("#wrap1").removeClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").addClass('hidden');
});

$("#catbox2").mouseenter( function () {
$("#wrap1").addClass('hidden');
$("#wrap2").removeClass('hidden');
$("#wrap3").addClass('hidden');
});

$("#catbox3").mouseenter( function () {
$("#wrap1").addClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").removeClass('hidden');
});

}(jQuery)); // End of use strict


Fiddle Update:
Removed unneccessary elements and made more notations.

Basically it seems that the mouseenter function is not working, I dont feel classes are being added or removed from the wraps because their display is always ON.

https://jsfiddle.net/0rsph8s8/20/

Answer

See I've filtered you code and show a way to show / hide as per corresponding clicked element.

You just need to add / remove the class.

(function($) {
  "use strict"; // Start of use strict

  
  $("#catbox1").mouseenter(function() {
    $("#wrap1").removeClass('hidden');    
    $("#wrap2").addClass('hidden');
    $("#wrap3").addClass('hidden');
  });

  $("#catbox2").mouseenter(function() {
    $("#wrap1").addClass('hidden');
    $("#wrap2").removeClass('hidden');
    $("#wrap3").addClass('hidden');
  });

  $("#catbox3").mouseenter(function() {
    $("#wrap1").addClass('hidden');
    $("#wrap2").addClass('hidden');
    $("#wrap3").removeClass('hidden');
  });

}(jQuery)); // End of use strict
.hidden
{
  display: none; 
}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="wrap">
    <div class="catbox" id="catbox1">
      <div class="catboxInner">
        <div class="catboxInnerText">Winding garden path</div>
      </div>
    </div>
    <div class="catbox" id="catbox2">
      <div class="catboxInner">
        <div class="catboxInnerText">Winding garden path</div>
      </div>
    </div>
    <div class="catbox" id="catbox3">
      <div class="catboxInner">
        <div class="catboxInnerText">Winding garden path</div>
      </div>
    </div>
  </div>

  <div class="wrap" id="wrap1">
    wrap1
  </div>  
  <!--end of wrap-->

  <div class="wrap hidden" id="wrap2">
    wrap2
  </div>
  <!--end of wrap-->

  <div class="wrap hidden" id="wrap3">
    wrap3
  </div>  
</body>