Docs

[Sam W]

My client would like to make the black & white image on

About

appear and disappear (or better yet slide down) by clicking.

Is it possible?

Thanks

[Thai]

Hi Sam,

#1] Please add the following code under Customizer > Custom > Edit Global CSS:

.x-no-bg-image {
    background-image: none !important;
}
.x-no-bg-image * {
    color: #000 !important;
}

#2] After that add the following code under Customizer > Custom > Edit Global JS:

jQuery( function($) {
	$("#worry").on('click touchend', function(){
		$(this).toggleClass('x-no-bg-image');
	});
});

Let us know how it goes!

[Sam W]

It works.

I would like for the type to hide also and for the content below to move up.

[Lely]

Hi Sam,

Please update above CSS to this:

.x-no-bg-image {
    display: none !important;
}

Please note that making it disappear means that we cannot click it again to show.

Hope this helps.

[Sam W]

I works great. I was wondering if there was a way to make an arrow symbol to click to make image appear/disappear.

Thanks

[Lely]

Hi Sam,

We can use the Icon element like below:
[icon type="arrow-up" class="worry"]
Check this link:http://theme.co/x/demo/icon/1/shortcodes/icons/ for other arrow type.
Then update the javascript to this:

jQuery( function($) {
	$(".worry").on('click touchend', function(){
		$(this).toggleClass('x-no-bg-image');
	});
});

Hope this helps.

[Sam W]

Where do I insert [icon type=”arrow-up” class=”worry”]?

[Nabeel A]

Hi again,

You can use Text Element to add the shortcode if you’re using Cornerstone.

Hope this helps!

[Sam W]

What if I’m not using cornerstone?

[Sam W]

I got the layout in cornerstone but now I have no clue whats going on with the clickable image
also the Iframe I have set up on top is now not full width.

Help?

[Lely]

Hi Sam,

Please use class instead. Id should be unique unlike class where we can use it many times.
This updated JS:

jQuery( function($) {
	$(".worry").on('click touchend', function(){
		$(this).toggleClass('x-no-bg-image');
	});
});

.worry means class worry. Before it is #worry which means ID worry.
Please remove worry from section ID field and put it inside the class field instead.
So when you click the entire section with class worry it will hide the content inside. Now, please move this:[icon type="arrow-up" class="worry"] outside that section. It will be hidden too if it will be inside. Then instead of using ID again on this ICON, please use class like below:

[icon type="chevron-down" class="worry" style="text-align: center; font-size: 72px;"]
Move this icon to somewhere accessible after the entire section is hidden.

Hope this helps.

[Sam W]

OK. Thanks.
Can you take a look at what have I done wrong now.

Seems close. I want to be able to open and close image.

Also any idea what is going on with the iframe on top?

Thanks

[Nabeel A]

Hi again,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Sam W]

This reply has been marked as private.

[Paul R]

Hi,

Kindly do the following.

1. Add this in custom > css

.x-icon.worry {
    display:block !important;
}

2. Change js code to this.

jQuery( function($) {
	$(".x-icon.worry").on('click touchend', function(){
		$('.x-section.worry').toggleClass('x-no-bg-image');
	});
});    

3. Remove code in your custom > css that reads.

.x-no-bg-image {
    display: none !important;
}

Hope that helps.

[Author]

Posts