How to have buttons/link show/hide object/content on a single page?

Nanuk · October 2017

Hi,

I have four links (or buttons). Each of the four links have four different images and text. I need only first one to show after the page load and have others hidden. the hidden will show if the associated links are click (& show only the one for the link not all). Kind a similar to Tabs maybe, but to fit the full-width.

I already have a slider revolution slider on the page so some of sliders are not working or compatible or will not fit the full width format, like the offer slider. I also want the link on the top of the content.

Appreciate your help.

best.

Bryan · October 2017

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Nanuk · October 2017

I am running it on localhost.

Anyways, if you can tell me how to change "Tabs" background color or make the background transparent for both Title and Content?

Thanks

Bryan · October 2017

Please send me a link to your page and point to the tabs.

Nanuk · October 2017

Thanks for the email. However its just a tabs object from muffin builder nothing special. I know I can change the color of the fonts but like to change the background color or make it transparent.

here's the screen shots...

https://prntscr.com/h1ggw3
https://prntscr.com/h1gh89

Nanuk · October 2017

This was my original request...

This image -->, https://prntscr.com/h15ok7 shows 5 hover color box with 5 Text below.

This image shows how it is set up in the muffin builder --> https://prntscr.com/h15oam

So, only TEXT for option 1 to show on page load
when user clicks on option 2, only text for 2 to show
if user clicks on option 4, then only text for option 2 to show and so on....

thanks

Bryan · October 2017

Please send me a link to your page and point to the tabs.

Nanuk · October 2017

Like I said in the previous post I am running it on localhost.

Nanuk · October 2017

Shouldn't TABS be taking its background color from the background color set in the WRAP element?

Bryan · October 2017

It takes colors mainly from the theme colors>content>theme color
If you are asking about the auto-close feature then it is not possible. It will not hide on its own, you have to click it.

Nanuk · October 2017

You said,
It takes colors mainly from the theme colors>content>theme color

So as you can see from the images that this is broken and its not the theme color in TABS.

Do you have an expedited support or priority support ?

Bryan · October 2017

Please send a link when the page is online, we will write you custom css to change the accordion.

Nanuk · October 2017

Custom CSS does not solve any problems there are other issues will you write custom CSS for all?
Look at this .... http://forum.muffingroup.com/betheme/discussion/32740/few-stange-effects-options-not-working#latest

all of these seem related. Fix the original problem.

Bryan · October 2017

In almost every post we offer you help by logging in into your wordpress account and checking what is wrong. You either do not respond to these requests or you say that you are on localhost.

If you want us to help you, then you need to cooperate, we really need to see the code, we cannot do anything with screenshots. Please upload your website to a temporary server, we will gladly check what is wrong and help you.

We are really sorry that this conversation has gone so out of hand.

Thanks for your understanding.

Nanuk · October 2017

Thanks for getting back to me. Developing on localhost is the only way I could do this since I dont have access to the hosting site yet.

However, as a developer of the theme I believe you know where/which file you can set according/tabs background colors. If you make that changes to the files and send them to me I will just replace them on my localhost. You can set the background color to #252525.

Bryan · October 2017

So you mean this item, right?
http://themes.muffingroup.com/be/theme/shortcodes/content-blocks/#accordion
You want to change which bacground, the title bg or the active text bg.

Nanuk · November 2017

Yes, but also tabs

http://themes.muffingroup.com/be/theme/shortcodes/content-blocks/#accordion
http://themes.muffingroup.com/be/theme/shortcodes/content-blocks/#tabs

both title bg and active text bg.

Thank you very much for doing this.

Bryan · November 2017

This is the css for the accordion

.accordion .question .answer {
	background-color: #fff;
}
.accordion .question .title {
	padding: 14px 14px 14px 60px;
	font-size: 13px;
	font-weight: 700;
	position: relative;
	border-width: 0;
	border-style: solid;
	cursor: pointer;
	background-image: url(../images/bg_panel.png);
	background-repeat: repeat-x;
	background-position: left top;
}

This is the css for tabs

.ui-tabs .ui-tabs-panel {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: url(../../images/box_shadow.png);
	background-repeat: repeat-x;
	background-position: left top;
	border-width: 0;
	padding: 15px 20px 20px;
	margin: 0;
	overflow: hidden;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	white-space: nowrap;
	border-style: solid;
	border-width: 0 1px 0 0;
	margin: 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li.ui-state-active a::after {
	background: #0095eb;
}

Nanuk · November 2017

Thank you very much.

Can I put this under Custom CSS&JS section of the Theme Option or per page?

Nanuk · November 2017

OK. I tried at the page level and it doent work. only the title line changes the color nothing else.

Bryan · November 2017

Ok, please add !important at the end of the css statement you want to change.
You can paste the css on the page directly or in theme options>custom css&js>css
Try deleting browser cache, it could hold some CSS.

Nanuk · November 2017

Sorry, but its not working

Bryan · November 2017

Okay, please send a link to the page where you want to edit the styles and tell us what exactly is not working.
This is why we always want the link to tthe page, to write custom css and see if anything else is not interfering with it.

How to have buttons/link show/hide object/content on a single page?

Comments