hello everyone…
I would like to create the following with the pro footer and need a tip on how to do it.
I want when I click on a footer menu that expands the page down and displays the content of that page.
doest it make sense? Try to show with pictures…
thank you!
Hi There @bigdreams
Thanks for writing in! There are couple of similar elements that you can try to achieve this.
One is the Tab element which will looks as follows.
Then the other option you have is Accordion element.
If you’re looking for the same effect, you may have to look for a 3rd party plugin for that. Please note that we do not provide support for 3rd party scripts or elements. All the plugin related issues should be escalated though the plugin author.
Thanks!
Okay I did it with the element “tabs” and it works fine! thank you!
I also create at first an empty tab — it looks better when u visit it for the first time.
I would like to have the tab expand smooth down — would that be possible with css?
thank you!!
Hi There @bigdreams
Are you referring to Accordion element or Tabs elements that you have tried? Further customization is little bit tricky and it could be outside our scope of the support. However if you can share your page URL by explaining your current issue, we might be able to assist you further.
On a side note, whenever you add a response to your thread, your thread will be moved to the end of our support queue which take longer time to get a response from our support staff.
Thanks!
ok thank you!
Site: http://box5706.temp.domains/~uxyfttmy/aquatic/schwimmteiche/
I use the TAB element.
I also have tried with java to have the tabs closed before some select the first one, but for some reason it doesn’t work.
jQuery('.x-nav-tabs .active, .x-tab-content .active').removeClass('active');
is it possible to have a button/arrow that close back an tab?
I also have the issues that the content of the tabs isn’t responsive on mobile device 
thank you! 
Hi @bigdreams,
Let’s do it this way, first, please add this to your footer bar’s Element CSS
$el .x-tabs-panel:not(.sub_active) {
display: none !important;
}
Then add this code to Footer’s custom javascript.
jQuery ( function($) {
$('ul[role="tablist"] button').on('click', function() {
$('.x-tabs-panel[data-x-toggleable="'+ $(this).data('x-toggleable') +'"]').addClass('sub_active');
} );
} );
Thanks!
yes awesome this way is working well.
then I would just need more help because its not responsive on mobile (width) and if is not a big deal with a closing link (buttonn, icon, …) The icon I would create and position by my own… I would only need a link that triggers the tab to be closed…
thank you!
Hello @bigdreams,
When I check this url, http://box5706.temp.domains/~uxyfttmy/aquatic/schwimmteiche/, I am not seeing the tabs in the footer. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Regards.
Hehe I’m happy to read that. That means that it looks good like a normal footer.
When u click on the first or the last link you will see the responsive problem.
The footer menu is the tab
Thank you in advance
Hi @bigdreams,
Since it’s tab element and not a menu, it will not respond similar even if you utilize the HIDE DURING BREAKPOINT option. It would need custom CSS, please add this CSS to the same area where you added the above CSS
@media ( max-width: 767px ) {
$el .x-tabs-list ul {
flex-flow: column !important;
}
$el iframe {
width: 100% !important;
}
$el h1, $el h2, $el h3, {
font-size: 100% !important;
}
}
Hope this helps.
ok thanks…
on the 3rd page its still not repsonive on mobile
i copied the css like to wrote on the same place… should I place it into the global css? or is it because of the css not working.
thank you
Hi @bigdreams,
You can try this code instead.
@media ( max-width: 767px ) {
$el .x-tabs-list ul {
flex-flow: column !important;
}
$el iframe {
width: 100% !important;
}
$el .x-tabs-panels .x-tabs-panel h1,
$el .x-tabs-panels .x-tabs-panel h2,
$el .x-tabs-panels .x-tabs-panel h3, {
font-size: 100% !important;
}
}
If that doesn’t help, please provide us your wordpress admin login in Secure Note
Thanks
hmm is maybe something with the sie “Datenschutz” ?
still not working
Hi,
Please provide us your wordpress admin login so we can take a closer look.
Thanks
Hi @bigdreams,
I’ve added this element CSS to the container:
$el,
$el .x-tabs-panel{
width: 100%;
padding: 0;
}
Then also add this custom CSS to the footer:
h2, h3 {
word-break: break-all;
}
.wpcf7 select, .wpcf7 textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="time"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="color"] {
min-width: inherit;
}
Everything looks good now:
Cheers!
you are so great!! thank you so much…
and the last thing we I asked u before… is it a big thing to have a triangle (like on the navbar design) to close the tab (footer) again?
thank youi!
Hi @bigdreams,
To add a triangle to your tabs, you can add the code below in Footer > CSS
.my-tabs .x-tabs-list li {
position:relative;
}
.my-tabs .x-tabs-list {
padding-bottom: 10px;
}
.my-tabs .x-tabs-list button.x-active span:after {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #000 transparent transparent transparent;
position: absolute;
bottom: -5px;
content: '';
left: 50%;
transform: translateX(-50%);
z-index: 99999;
}
Further customization from here would be getting into custom development. You might need to consult a web developer after this. Thank you for understanding.
First of all, thank you very much!
I just think you misunderstood me. I’d like to have a triangle at the bottom that makes the TAB close again.
Hi there,
It’s not currently possible since CSS pseudo selectors are not supported by other browsers, and even so, they are not clickable. It still need customization directly to the templates to add a clickable structure or element. And with that, I recommend contacting a developer for implementation.
Thanks!
ok i understand — thank you for the perfect support!
appreciate it!