Elements inside accordian

Hi,

I am trying to get 2 elements inside an accordion I have created on a contact page.
The page in question is: http://www.holyhead-anglesey-weightlifting-fitness-centre.co.uk/contact/

A ‘social’ sidebar I have created.

I have tried the shortcode: [cs_element_widget_area _id=“4”] [cs_element_widget_area _id=“ups-sidebar-social”] The sidebar did show up fine once or twice but most of the time sticks like: http://prntscr.com/jhwla7 What am I doing wrong here? Also, what you see currently above the accordian is what I want to achieve INSIDE the accordian. Is sidebar creation the most efficient way of achieving this? I really only want my social widget to show up inside the accordian but i don’t know how to shortcode a widget so I made a sidebar with the widget inside of it… if it helps i beliebt he widget ID is: sow-social-media-buttons-2

I HAVE EDITED THIS POST:
Having typed the bit above I’m almost certain that the widget shows up fine INSIDE the accordion when the same shortcode is used OUTSIDE (above) the accordion. Take the shortcode OUTSIDE the accordion away and the widget/sidebar INSIDE the accordion doesn’t work…

A map.

Given how much time I have spent with no results on the above i wish to achieve the same thing but with a map. the same map which now appears beneath the accordion.

EDITED AGAIN:
I figured I have nothing to lose so i tried the map and it seems to have worked straight away…

Thanks in advance for your help.

Hi There,

Thank you for writing in, I see that you’re using a 3rd party social icon plugin. Please utilize the social icon shortcode instead and wrap it in an anchor tag.

e.g.

<div class="x-colophon bottom">
<div class="x-social-global">
	<a href="#" class="facebook" title="Facebook" target="_blank">[x_icon type="facebook-square"]</a><a href="#" class="twitter" title="Twitter" target="_blank">[x_icon type="twitter-square"]</a><a href="#" class="youtube" title="YouTube" target="_blank">[x_icon type="youtube-square"]</a><a href="#" class="instagram" title="Instagram" target="_blank" style="outline: none;">[x_icon type="instagram"]</a>
</div>
</div>

Paste it directly on your accordion item, instead of using widgets.

Replace all # with the corresponding social page URL. You can see all the available icon shortcodes here.

Hope it helps,
Cheers!

That’s great thanks.

The map seems to have disappeared from the map section? Is there anything that can be done about that? Thanks.

Hey Ashley,

Regretfully, we could not provide a solution if we don’t know your setup. Please provide us with your WP Admin credentials in a Secure Note so we could login and investigate.

Thanks.

Have done so. Thankyou.

Hey There,

It seem like the [cs_element_map id="27"] didn’t work.

Could you please try with the map shortcode instead?

http://demo.theme.co/integrity-1/shortcodes/map/

Let us know how it goes!

Hi,
That worked great.
How would one go about adding the hue variation to the above map?
Thankyou.

Hi @Webb,

You may add a hue value to your google map shortcode. Like this,

[google_map lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#d73f01"][/google_map]

It’s not gonna work on [map] shortcode.

Thanks!

I used that code, only changing the hex value of the hue and lat & lng but I got this:


Thanjks

Hi There,

Could you please try adding the api key to your shortcode?

[google_map api_key="Your api key" lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#d73f01"][/google_map]

Let us know how it goes!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.