We help IT Professionals succeed at work.
Troubleshooting Question

How to add animation to a Jquery Script that hides one div and shows another?

Member_2_7966984
on
31 Views
Last Modified: 2020-10-30
Hello I am currently using a jquery script on a wordpress website that hides one div, and when clicked hides the clicked div and shows the second one that was initially hidden. I would like to know if there is anything I can do with this to add a little slide in type of animation - similar to this https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

This is what the jquery looks like ...
 
<script>
jQuery(document).ready(function($) {
   
   
$('.switch').click(function() {
  $('.switch').not(this).find('.cta1').show();
  $('.switch').not(this).find('.cta2').hide();
  $(this).find('.cta1').toggle();
  $(this).find('.cta2').toggle();
});


});
</script>
and this is what the HTML Looks like

      <div class="left-info-col">
         <div class="col-wrapper">
         <!-- 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 -->
         
         <!-- 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 -->
         
         
         <!-- section 3 -->
         <div class="switch">

               <div class="cta1">
                  <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="cta2">
                  <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="switch">

               <div class="cta1">
                  <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="cta2">
                  <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>
            
            
         </div>
         <!-- End Section 4 -->            
         
         <div class="why-pinnacle-button">
            <a href="/about/"><button class="pill-btn3">Why Pinnacle</button></a>
         </div>
      
      </div>
Not all the CSS but this is the part that is needed to make the above solution work

.cta2{
   display: none;
}

Here is a URL to preview the stuff all put together http://ozonestaging.wpengine.com/

This is the part of the page that uses this



Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
you can try fadeIn / fadeOut instead of show / hide

$('.switch').click(function() {
  $('.switch').not(this).find('.cta1').show();
  $('.switch').not(this).find('.cta2').hide();

  if ($(this).find('.cta1').is(":visible")) {
    $(this).find('.cta1').fadeOut();
  } else {
    $(this).find('.cta1').fadeIn();
  }

  if ($(this).find('.cta2').is(":visible")) {
    $(this).find('.cta2').fadeOut();
  } else {
    $(this).find('.cta2').fadeIn();
  }
});


Author

Commented:
Not certain if that is working ... I am not noticing any fading effect happening http://ozonestaging.wpengine.com/

This is what the code looks like now that I tried that solution

<script>
jQuery(document).ready(function($) {
   
   
$('.switch').click(function() {
  $('.switch').not(this).find('.cta1').show();
  $('.switch').not(this).find('.cta2').hide();


  if ($(this).find('.cta1').is(":visible")) {
    $(this).find('.cta1').fadeOut();
  } else {
    $(this).find('.cta1').fadeIn();
  }


  if ($(this).find('.cta2').is(":visible")) {
    $(this).find('.cta2').fadeOut();
  } else {
    $(this).find('.cta2').fadeIn();
  }
});


});
</script>
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
use full jQuery lib
animations are not in the min version...

Author

Commented:
I added this to before my closing </head> tag - but not sure if I added the full library correctly is this what I am supposed to do ?

Add this script to the <head> section? 

<script   src="https://code.jquery.com/jquery-3.5.1.js"  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="  crossorigin="anonymous"></script>

I got that from this site - https://code.jquery.com/ 
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I dont get why you have this structure



you have fixed title and you have one detail
either you show or not... simple...

but you are using 2 contents and showing one or the other...
and they have same title...
is it because of color?
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
looks like you are over complicating this

and this messes-up everything


have a look at this, js and html structure
https://jsfiddle.net/HainKurt/bm534v91/

Author

Commented:
So I had one container that is 50% opacity (icon and headline)  - then when clicked the other container would have the extra content and be 100% opacity - Your solution is very close - could it be modified to have the opacity 100% when clicked/activated?  
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
something like this
$('.switch').click(function() {

  $('.switch').not($(this)).find('.cta2').hide();
  $('.switch').not($(this)).find('.cta1 .info-box-title').removeClass("bright");

  if ($(this).find('.cta2').is(":visible")) {
    $(this).find('.cta2').fadeOut(1000);
    $(this).find('.cta1 .info-box-title').removeClass("bright");
  } else {
    $(this).find('.cta1 .info-box-title').addClass("bright");
    $(this).find('.cta2').fadeIn(1000);
  }

});
+ some css changes...
.bright{
  opacity: 100% !important;
}
https://jsfiddle.net/HainKurt/ynL6xweu/

Author

Commented:
This is an example of how it should look


Icon , title, and description are all 100% opacity when expanded - I tried adding the Jquey code and the css bit you sent but there are currently parts that are not 100% opacity when clicked 
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
updated
you should remove all opacity from individual element and apply to switch...

https://jsfiddle.net/HainKurt/ynL6xweu/
this is the js
$('.switch').click(function() {

  $('.switch').not($(this)).find('.cta2').hide();
  $('.switch').removeClass("bright");

  if ($(this).find('.cta2').is(":visible")) {
    $(this).find('.cta2').fadeOut(1000);
    $(this).removeClass("bright");
  } else {
    $(this).addClass("bright");
    $(this).find('.cta2').fadeIn(1000);
  }

});
and added some padding to icon, so it does not jump up and down after hiding the text
max 2 lines
.switch {
  margin-bottom: 25px;
  overflow: auto;
  overflow-y: hidden;
  opacity: 50%;
  clear: left;
}

.info-icon {
  width: 95px;
  float: left;
  padding-bottom: 35px;
}

.bright {
  opacity: 100% !important;
}



you can adjust the font and spacing when needed...
my fiddle does not have all css...

Author

Commented:
Sorry Got one last request on this - Would it be possible to have the first one automatically expanded by default? 
Sr. System Analyst
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Great Thanks so much for all your help with this!