We help IT Professionals succeed at work.
Troubleshooting Question

In Jquery how Do I change my hover function to a click function instead?

Member_2_7966984
on
53 Views
Last Modified: 2020-10-22
Hi
I have some jquery code I am repurposing from another project I did however on my new project rather than a hover I would like the function to trigger on click instead.

This is what I currently have

<script>
jQuery(document).ready(function($) {
   
   
   $('.switch').hover(function() {
         $(this).find('.cta1').hide();
         $(this).find('.cta1b').show();
      }, function() {
         $(this).find('.cta1b').hide();
         $(this).find('.cta1').show();
   });



   $('.switch2').hover(function() {
         $(this).find('.cta2').hide();
         $(this).find('.cta2b').show();
      }, function() {
         $(this).find('.cta2b').hide();
         $(this).find('.cta2').show();
   });


   $('.switch3').hover(function() {
         $(this).find('.cta3').hide();
         $(this).find('.cta3b').show();
      }, function() {
         $(this).find('.cta3b').hide();
         $(this).find('.cta3').show();
   });

   $('.switch4').hover(function() {
         $(this).find('.cta4').hide();
         $(this).find('.cta4b').show();
      }, function() {
         $(this).find('.cta4b').hide();
         $(this).find('.cta4').show();
   });

});
</script>

I tried replacing the .hover with a .click but it did not work so curious what would need to be changed to fire this function with a click rather than a hover... The hover currently works well ... but design calls for a click and not a hover - I thought I could just change .hover to .click - but I'm guessing there is more to it than that 
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
   $('.switch').on("click", function() {
         $(this).find('.cta1').toggle();
         $(this).find('.cta1b').toggle();
   });
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
can you share the html code as well...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
change hover with click and use toggle instead of hide/show
should work... I can test after you post the html code
$('.switch').click(function() {
  $(this).find('.cta1').toggle();
  $(this).find('.cta1b').toggle();
});

Author

Commented:
Sure here it is...
also- here is the site url: http://ozonestaging.wpengine.com/ 

<div class="why-pinnacle-row">
   <div class="why-content">
      <div class="left-info-col">
         
         <!-- section 1 -->
         <div class="switch">

               <div class="cta1" id="divb_id" >
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>
                  <div class="info-box-title">20-40% Savings</div>
               </div>

               <div class="cta1b" id="diva_id">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">20-40% Savings</div>
                     <div class="info-box-description">You can save 20-40% on your existing ozone system operating cost when you switch to Pinnacle Ozone.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 1 -->
         
         <!-- section 2 -->
         <div class="switch2">

               <div class="cta2">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>
                  <div class="info-box-title">2X Capacity with smaller footprint</div>
               </div>

               <div class="cta2b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">2X Capacity with smaller footprint</div>
                     <div class="info-box-description">Twice the capacity. Half the cost. Talk about an ROI.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 2 -->
         
         
         <!-- section 3 -->
         <div class="switch3">

               <div class="cta3">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_efficient.png"></div>
                  <div class="info-box-title">30% mORE eFFicient</div>
               </div>

               <div class="cta3b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_efficient.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">30% mORE eFFicient</div>
                     <div class="info-box-description">We engineered an ozone production system that is fully automated, self protecting, and 30% more efficient than the closest competitor.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 3 -->         
         
         
         <!-- section 4 -->
         <div class="switch4">

               <div class="cta4">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_redundancy.png"></div>
                  <div class="info-box-title">5x Redundancy</div>
               </div>

               <div class="cta4b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_redundancy.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">5x Redundancy</div>
                     <div class="info-box-description">Why settle for 100% redundancy when the smallest Pinnacle system can offer you over 500%?</div>
                  </div>
               </div>
         </div>
         <!-- End Section 4 -->            
         
      
      </div>
      
      <div class="right-col-img">
      
      </div>
   
   </div>
</div>


HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
https://jsfiddle.net/HainKurt/5f3n6rgd/
$('.switch').click(function() {
  var isv = $(this).find('.cta1').is(":visible");
  $(this).find('.cta1').toggle(!isv);
  $(this).find('.cta1b').toggle(isv);
});

$('.switch2').click(function() {
  var isv = $(this).find('.cta2').is(":visible");
  $(this).find('.cta2').toggle(!isv);
  $(this).find('.cta2b').toggle(isv);
});

$('.switch3').click(function() {
  var isv = $(this).find('.cta3').is(":visible");
  $(this).find('.cta3').toggle(!isv);
  $(this).find('.cta3b').toggle(isv);
});

$('.switch4').click(function() {
  var isv = $(this).find('.cta4').is(":visible");
  $(this).find('.cta4').toggle(!isv);
  $(this).find('.cta4b').toggle(isv);
});
I guess you want this...
difficult without real images though...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I guess you added lots of codes to do something...
try this

$('.switch').click(function() {
  $(this).find('.cta1').toggle();
  $(this).find('.cta2').toggle();
});
.cta2 {display:none}
      <!-- section 1 -->
      <div class="switch">

        <div class="cta1" id="divb_id">
          <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>
          <div class="info-box-title">20-40% Savings</div>
        </div>

        <div class="cta2" id="diva_id">
          <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>

          <div class="over-wrapper">
            <div class="info-box-title">20-40% Savings</div>
            <div class="info-box-description">You can save 20-40% on your existing ozone system operating cost when you switch to Pinnacle Ozone.</div>
          </div>
        </div>
      </div>
      <!-- End Section 1 -->
<hr>
      <!-- section 2 -->
      <div class="switch">

        <div class="cta1">
          <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>
          <div class="info-box-title">2X Capacity with smaller footprint</div>
        </div>

        <div class="cta2">
          <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>

          <div class="over-wrapper">
            <div class="info-box-title">2X Capacity with smaller footprint</div>
            <div class="info-box-description">Twice the capacity. Half the cost. Talk about an ROI.</div>
          </div>
        </div>
      </div>
      <!-- End Section 2 -->
https://jsfiddle.net/HainKurt/haz4j3co/
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I changed all class to switch, no different class needed
all sub div classes are replaced with cta1 and cta2
a small css to hide cta2 initially
and simple jQuery to toggle cta1 and cta2 on click event on switch elements
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
or you can hide both initially by css

.cta1 {display:none}
.cta2 {display:none}

or you can just use same class

.cta {display:none}
and use this inside divs...

whatever you need, all pieces are listed...
just mix an match...

Author

Commented:
Cool Thank You ! - How Could I get the others to collapse/hide if another one is selected? - So at most only one could be expanded at a time?

Author

Commented:
This is what I currently have in there for code -
<script>
jQuery(document).ready(function($) {
   
   
   $('.switch').on("click", function() {
         $(this).find('.cta1').toggle();
         $(this).find('.cta1b').toggle();
      }, function() {
         $(this).find('.cta1b').toggle();
         $(this).find('.cta1').toggle();
   });






   $('.switch2').on("click", function() {
         $(this).find('.cta2').toggle();
         $(this).find('.cta2b').toggle();
      }, function() {
         $(this).find('.cta2b').toggle();
         $(this).find('.cta2').toggle();
   });




   $('.switch3').on("click", function() {
         $(this).find('.cta3').toggle();
         $(this).find('.cta3b').toggle();
      }, function() {
         $(this).find('.cta3b').toggle();
         $(this).find('.cta3').toggle();
   });


   $('.switch4').on("click", function() {
         $(this).find('.cta4').toggle();
         $(this).find('.cta4b').toggle();
      }, function() {
         $(this).find('.cta4b').toggle();
         $(this).find('.cta4').toggle();
   });


});
</script>
And this is the HTML

   <!-- section 1 -->
         <div class="switch">


               <div class="cta1" id="divb_id" >
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>
                  <div class="info-box-title">20-40% Savings</div>
               </div>


               <div class="cta1b" id="diva_id">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_savings.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">20-40% Savings</div>
                     <div class="info-box-description">You can save 20-40% on your existing ozone system operating cost when you switch to Pinnacle Ozone.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 1 -->
         
         <!-- section 2 -->
         <div class="switch2">


               <div class="cta2">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>
                  <div class="info-box-title">2X Capacity with smaller footprint</div>
               </div>


               <div class="cta2b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_capacity.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">2X Capacity with smaller footprint</div>
                     <div class="info-box-description">Twice the capacity. Half the cost. Talk about an ROI.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 2 -->
         
         
         <!-- section 3 -->
         <div class="switch3">


               <div class="cta3">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_efficient.png"></div>
                  <div class="info-box-title">30% mORE eFFicient</div>
               </div>


               <div class="cta3b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_efficient.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">30% mORE eFFicient</div>
                     <div class="info-box-description">We engineered an ozone production system that is fully automated, self protecting, and 30% more efficient than the closest competitor.</div>
                  </div>
               </div>
         </div>
         <!-- End Section 3 -->         
         
         
         <!-- section 4 -->
         <div class="switch4">


               <div class="cta4">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_redundancy.png"></div>
                  <div class="info-box-title">5x Redundancy</div>
               </div>


               <div class="cta4b">
                  <div class="info-icon"><img src="/wp-content/uploads/2020/10/desktop_info-accordion_icons_redundancy.png"></div>
                  
                  <div class="over-wrapper">
                     <div class="info-box-title">5x Redundancy</div>
                     <div class="info-box-description">Why settle for 100% redundancy when the smallest Pinnacle system can offer you over 500%?</div>
                  </div>
               </div>
         </div>
         <!-- End Section 4 -->            
link to my css - if that helps - http://ozonestaging.wpengine.com/wp-content/themes/Avada-Child-Theme/style.css?ver=5.5.1

Author

Commented:
This is the desired end result if you scroll down near the bottom you'll see how it is supposed to function
https://xd.adobe.com/view/f63567e5-912a-477b-ab9b-b216ce000187-a366/screen/1cecca0c-3c10-4330-b2fd-27cd314e34f5/ 

It has a slide slide effect that happens when switching - not sure how hard that would be to incorporate 
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
@HainKurt you copy/paste my solution after your first post...
and it's not the first time
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
How Could I get the others to collapse/hide if another one is selected?

   $('.switch').on("click", function() {
         $(this).find('.cta1').toggle();
         $(this).find('.cta1b').toggle();
         $(this).find('.cta2').hide();
         $(this).find('.cta2b').show();
         $(this).find('.cta3').hide();
         $(this).find('.cta3b').show();
   });

Author

Commented:
Thanks - I tried using the above but it did not hide the others when I clicked the other ones- they all just stay open - perhaps there was some modifications to the HTML needed in order for your solution to work? 
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I believe your previous code was not doing this...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
do you want just to show cta1 initially
then when clicked on one of them, show cta2 and when clicked hide cta2
if cta2 is open in another section, it will hide and show new one...
is that right? only one cta2 will, be visible

is this is the requirement, here

https://jsfiddle.net/HainKurt/ovy1kjhn/
Java Script
$('.switch').click(function() {
  var isV = $(this).find('.cta2').is(":visible");
  $(".cta2").hide();
  $(this).find('.cta2').toggle(!isV);
});
CSS
.cta2 {display:none}
and I used same class for all switches...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
@Leakim

I just checked to see what you mean, but they are not the same thing,
it is not copy paste, it may look same/similar but they are not...

I use my own solutions, and sometimes, they may be same/similar to others...

$('.switch').on("click", function() {...
vs
$('.switch').click(function() {...

also, I use jsFiddle to store my solutions and current one is totally different than what we have started...

Author

Commented:
@HainKurt I took a look at your fiddle it appears that the first div which just has the title is still visible when the second div displays which has the title and the description in it  
So for example when cta2b is displayed then cta2 should not be visible at all... and if I click on another section other than the cta2 section then cta2b should hide and show  cta2 and then cta2b should no longer be visible.

If you want to see a visual representation/example of what I am trying to achieve check out this link https://xd.adobe.com/view/f63567e5-912a-477b-ab9b-b216ce000187-a366/screen/1cecca0c-3c10-4330-b2fd-27cd314e34f5/    ...the section I am working on is near the bottom so you will have to scroll down in order to see it

but you got the general idea of collapsing the other sections correct in the fiddle - I just also want to hide cta2 if cta2b is displaying as well
Sr. System Analyst
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Very interesting about the crypto money - you are referring to  https://xd.adobe.com/..... I assume?
Strange Adobe would allow something like that to happen on their website if that is the link you are referring to 

Author

Commented:
Thank you so much for your help I was able to implement your solution and it worked great!