I have a JQuery function that sets active based on hover, I want to automate this to avoid duplication of effort : <p>I have a fairly simple piece of JQuery that hides/unhides an element, based on which of the tabs are hovered over:</p>

<p>HTML:</p>

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

<p>JQuery:</p>

<pre><code>$(".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")
});
</code></pre>

<p>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.</p>

<p>Thank you,
Suxors</p>
