dimanche 26 juin 2016

I have a JQuery function that sets active based on hover, I want to automate this to avoid duplication of effort

I have a fairly simple piece of JQuery that hides/unhides an element, based on which of the tabs are hovered over:

HTML:

    <div class="row col-sm-4">
      <ul class="text-center">
        <li><p class="chat-provider-tab tab">Chat Provider</p></li>
        <li><p class="operations-tab tab">Operations</p></li>
        <li><p class="proactive-chat-tab tab">Proactive Chat</p></li>
      </ul>
    </div>
    <div class="row col-sm-8">
      <p class="chat-provider helptip" style="display: none">Chat Provider</p>
      <p class="operations helptip" style="display: none">Operations</p>
      <p class="proactive-chat helptip" style="display: none">Proactive Chat</p>
    </div>

JQuery:

$(".chat-provider-tab").hover( function(){
    $(".chat-provider").toggleClass("activetab")
});

$(".operations-tab").hover( function(){
    $(".operations").toggleClass("activetab")
});

$(".proactive-chat-tab").hover( function(){
    $(".proactive-chat").toggleClass("activetab")
});

I'd like to automate this where possible, and have tried several methods, however haven't been able to replicate the success I'm having with the above method.

Thank you, Suxors

Aucun commentaire:

Enregistrer un commentaire