We Keep Coding

What do I change on JQuery Code to Click Text rather than change on Hover?

I am following the site shown below to create tabs on my Divi Site (on my localhost at the moment) but I was looking for some help in regards to changing the behaviour of the code.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-custom-testimonial-tabs-with-divi-free-download
I have managed to follow the tutorial and this works exactly as shown on the site but I would like to change the behaviour from hover to clicking the blurbs (names) but not sure what part of the jquery I need to change.
The following is the jquery code:
jQuery(function($){
$(document).ready(function(){
$('#testimonial-person-1').addClass('testimonial-active');
$('[id*="testimonial-person"]').hover(function() {
var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);
$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');
$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');
});
});
});
The CSS Code:
.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}
.testimonial-active {
transform: translateX(-10%);
}
[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: context-menu;
}
[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;
visibility: hidden;
opacity: 0;
}
I would appreciate it, if somebody could guide me in how I can make this change on my site.
Thanks in advance.

Thanks to David for pointing it out.
I have changed the following line:
$('[id*="testimonial-person"]').hover(function() {
and this does what I wanted.
Thank you so much.

Transition from darkened image to non-darkened on mouse over with CSS/Javascript?

I´m trying to get the inverse effect of this code (jsfiddle-demo):
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
div.hoverText{display = none;}
I mean, I want a html code where its images are darkened and the darkeness disappears «on mouse over» -with a transition.

You just have to invert the opacity values :)
(the "base" background must have opacity < 1, and the ":hovered" background must have opacity = 1)
Here's a fork of you fiddle : http://jsfiddle.net/m1mcb66h/
a.darken img {
[...]
opacity: 0.7;
}
a.darken:hover img {
opacity: 1;
}

I think this should do the trick
instead of
opacity:0.7;
write
filter: contrast(150%);

I am assuming your .html is as follows:
<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>
I solved it like this:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img{
opacity: 0.7;
}
div.hoverText{display = none;}
Your last pseudoclass works fine also like this:
a.darken img:hover{
opacity: 0.7;
}
Please, provide .html for future questions.

Transition on image width does not work with window scroll

i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.

You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}

Bootstrap multilevel dropdown slide effect?

I have a multilevel dropdown in a Bootstrap project I made. I need it to be so that the dropdowns would slide. How am I to accomplish that?
I have the following code done, but I need to add to it. Here's what the code does:
It opens and closes the specific dropdown if you click its dropdown toggle.
If you click outside the dropdown, but inside its parent, only the child dropdown will close; and if you click outside the parent, the parent will close, and so on.
If you click on the dropdown toggle of a child dropdown, it will only affect that dropdown and its children, not its parents.
I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402
I'm sure it does more specifications, but you get the idea. Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/
For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. I want it all to work exactly like how I have it working now, except that it slides.
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});

Your fiddle is not totally clear for me. Your navbar has no .navbar class and your nav menus no .navbar-nav.
You can try to add the CSS code like that shown below:
.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://jsfiddle.net/hhb9u7db/1/
resources:
Transitions on the display: property
http://davidwalsh.name/css-slide
For Bootstrap default navbar you can use the following Less code:
.dropdown-menu, .open > .dropdown-menu,
{
display:block;
max-height: 0;
overflow-y:hidden;
visibility:hidden;
transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
{
max-height: 500px;
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}
Which compiles with the autoprefix plugin into the following CSS code (lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"):
.dropdown-menu,
.open > .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://www.bootply.com/dd5aFlGTTE

jQuery expanding menu easing without css transition

So, I'm trying to set up a expanding and collapsing menu depending on what item you are hovering. I am using css transitions to make the expanding and collapsing smooth and some jQuery to change width css properties. However, IE doesn't support transition css so I am trying to find a way to do this with jQuery but haven't found a solution. My knowledge isn't the greatest when it comes to jQuery. Any help would be amazing.
<html>
<head>
<style>
.a{
width:100px;
height:100px;
background:#852369;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.b{
width:100px;
height:100px;
background:#542365;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.c{
width:100px;
height:100px;
background:#523641;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
</style>
</head>
<body>
<div class="a">This is div a</div>
<div class="b">This is div b</div>
<div class="c">This is div c</div>​
<script>
$(function() {
$('.a').hover(function() {
$('.b,.c').css('width', '50');
$('.a').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.b').hover(function() {
$('.a,.c').css('width', '50');
$('.b').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.c').hover(function() {
$('.a,.b').css('width', '50');
$('.c').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
});​
</script
</body>
</html>
Here is a simple jsfiddle of what I have currently.
http://jsfiddle.net/kevin11189/kRZHL/1/
Thanks,
Kevin

You can use the animate and stop methods to accomplish this:
http://jsfiddle.net/brianpeiris/CgY2b/2/
$(function() {
var menus = $('.menu');
menus.hover(function() {
menus.stop();
$(this).animate({'width': '200'});
menus.not(this).animate({'width': '50'});
}, function () {
menus.stop().animate({'width': '100'});
});
});
<div class="menu a">This is div a</div>
<div class="menu b">This is div b</div>
<div class="menu c">This is div c</div>
.menu{
width:100px;
height:100px;
position:relative;
float:left;
}
.a{ background:#852369; }
.b{ background:#542365; }
.c{ background:#523641; }