Hide and Show Section

[cbdesign]

Hi, Do you have a way for me to show and hide a section upon clicking a link? I want to have a video link on my home page but I dont’ want the video to always take up space and show. I only want the video to show once the viewer clicks “watch video” or something like that. Is there a way to hide and show a section when clicked? Thanks! To show you what I’m talking about – here is a link to a site that has that feature and screenshots so you can see the feature in action: http://six22llc.com

As soon as you’re able to respond would be great because I’d like to know how to proceed. Thanks!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, you could try using an element like the tabs element in visual composer 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

If you can share admin credentials i could try some examples

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

This reply has been set as private.

[cbdesign]

Just thinking I guess it would be like your accordion feature (the one without the gray background) like the attached screenshot. I need something that I can use with the blue background under the image header (where it says now “Explore the Woodbriar Advantage”) so I can show or hide the actual video underneath that line. It would have to be white text and white icons ontop of the blue background. And I don’t want to show extra lines underneath like you have on the attached screenshot? (I circled in red) Let me know if this is what you had in mind and how I can do it. I would want it to say “show or hide video” so people know they can click to show the video and click again to hide it… Thanks!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, i did some changes on your homepage, added this to the visual composer:

COPY CODE

[vc_accordion collapsible="" disable_keyboard="" icons_position="to-left" active_tab="false"][vc_accordion_tab icon="angle-up" icon_closed="angle-down" tooltip_position="left" tooltip_action="hover" title="Video" el_id="videorow"][vc_video link="https://www.youtube.com/watch?v=fLucfNjInuQ"][/vc_accordion_tab][/vc_accordion]

And this css to the page css

COPY CODE

.panel-title a {
    color: white !important;
    margin-left: 47%;
}
.wpb_wrapper {
    background-color: black;
}
.panel {
    background-color: black !important;
}
.panel {
    border: none !important;
}
span.icon-closed.icon-angle-down:before {
    margin-top: 2%;
    position: absolute;
    margin-left: 47% !important;
    color: white;
}
.panel-heading {
    height: 80px;
}
span.icon-opened.icon-angle-up:before {
     margin-top: 2%;
    position: absolute;
    margin-left: 47% !important;
    color: white;
}
.wpb_video_wrapper {
    width: 70%;
    margin-left: 13%;
}
.panel-body {
    border: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[cbdesign]

Thank you soooo much!!! This is perfect!! So sorry for confusing you – I’m actually working on the Home Default page (that looks like this) not with the portfolio. So can I just make the same changes to that page and it will work there as well? If you can let me know thanks!! 🙂

Attachments:

You must be logged in to view attached files.

[cbdesign]

The page is called Home Default NEW – I tried putting in the code myself but messed something up so cloned the original page and started again. So I’ll leave it out until you’re able to tell me where exactly in code to include it. (Btw – the blue background it’s going on is #236A95) And I guess I would put it before or after it says “Explore the Woodbriar Advantage” Thanks!!

[cbdesign]

Maybe where you have on your sample “video” that should say Explore the Woodbriar Advantage and is there a way that the text could change to HIDE VIDEO (or just hide? What do you think is better?) when it’s clicked so the viewer can see easily they can click again to close the video section?

Thanks!!

[cbdesign]

Also one quick thing about the Revolutionary Slider – I know it’s not your plugin but right now when you click the “Scroll Down” text button it goes in the middle of the blue and white sections – how do I get it to go either to the top of the blue section or white (Redefining Healthcare)? Thanks!

[Laura]

Hello, i can add it to the page you want 🙂 i will need the video url, the title can only be one, opened and closed.
Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

Hi, thank you!! 🙂 The page is the Home Default NEW page (the published version that is linked as home page – not the drafts with similar names) and I want the Explore the Woodbriar Advantage (with play icon) to be the “link” that you click to “drop down” the video underneath. The video should be on same blue background with a little padding between that link and bottom – like it has a little padding now between Explore the Woodbirar Advantage line and the end of the blue section. Thank you!!!! Here’s the code:

<iframe class=”wistia_embed” src=”//fast.wistia.net/embed/iframe/n9zetbjeoh” name=”wistia_embed” width=”900″ height=”506″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

Thank you again!!! Your theme and support is really amazing!!! 🙂

[Laura]

Hello, will begin setting it up, but i need the video in youtube to embed it correctly 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

This reply has been set as private.

[cbdesign]

I am getting this error please let me know how to resolve as I need to work on the site:

Parse error: syntax error, unexpected ‘endif’ (T_ENDIF) in /home/content/p3pnexwpnas08_data02/16/2685416/html/wp-content/themes/kleo-child/functions.php on line 17

[Laura]

Hello, please go to functions.php of child theme and delete the codes inside ( backup the file before) About the video, could you upload it to youtube? the Video element works only with youtube or vimeo

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

Where do I find functions.php of child theme code? I don’t know how to do any of this. Does this have something to do with the video you were adding to home page? Because it worked fine till that. This is my client’s site and it doesn’t look good that it’s been down for 2 days. And now is the weekend and we have a holiday next week… I just lost this time to work and complete the site and I’m a bit frustrated. I’ll be here a little longer tonight – I’d really appreciate if you can email me or call me and tell me how to resolve this ASAP – I need the site back up and I don’t know anything about php code or ftp.

THANK YOU!! 🙂

[cbdesign]

Please let me know when this will be resolved. I don’t know anything about the coding but do have access to the sftp thru GoDaddy – which andrei@seventhqueen.com requested. I will give him the info so is there a way for you to get in touch with him and tell him your recent changes (video on home pg) etc and see if you can resolve the error? There was nothing done to the ftp files as we haven’t gone into the backend so it had to be something you did on the front end… Please help resolve this!!! I need this site back up!!! Thank you!!

As for the video code – the code I originally sent you was the code that worked for me. It didn’t work with your video player option on the theme – it only worked as code.

<iframe class=”wistia_embed” src=”//fast.wistia.net/embed/iframe/n9zetbjeoh” name=”wistia_embed” width=”900″ height=”506″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

[cbdesign]

Good Morning Laura,

Andrei from your team fixed the php issue. I’m wondering how that got messed up as noone touched the backend? (I don’t even know how and I haven’t given you access?) Do you think it had something to do with adding the drop down feature to home page?

Anyway let me know now how we can add the video. The code and link I sent you was all I was given by the video company. This code worked for me:<iframe class=”wistia_embed” src=”//fast.wistia.net/embed/iframe/n9zetbjeoh” name=”wistia_embed” width=”900″ height=”506″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

Can it work with video the feature? Let me know. Thanks! Have a good weekend!

[Laura]

Hello, the iframe doesnt seem to work, thats why i asked a youtube id 🙂
About the issue, it was my fault, it was an error in the code hile i was working in your website, to fix it i needed ftp credentials

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

Thanks for responding – that’s what the video company sent. What if they don’t have a youtube id?

Thanks!

[cbdesign]

Any update to my last question? Thanks!

[cbdesign]

When will I receive a response to my questions?

[Laura]

Hello, i have been trying but the only way is to save the video to your computer then upload it to youtube and get the url

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

Hi, That’s the only way to have the video work? What about the embed code they provide – that I sent you and worked for me as regular code, not using your video feature?

I’ve never done the youtube thing before will that make a difference to the actual video? I’d like to get this completed asap. Thanks!

[cbdesign]

OK never mind – they uploaded to Youtube and I updated the code and it worked. Thanks!! So 2 questions – any way to include the “play” icon with the Explore the Woodbriar Advatange title so people know it’s a video?

And also if you see screenshot attached- the screen sizes (width) less than large – the “up” arrow gets hidden behind the Explore the Woodbriar Advantage title when video is opened and the video shows a lot of black on top and bottom of video. Any way to make that section more responsive friendly?

Thanks so much!

[cbdesign]

Sorry here’s the screenshot for my last comment

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will work on it now 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Hello, added the icons as you already fixed the youtube size right?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

Hi,

No same issue (I don’t know how to fix) – too much black on top and bottom of smaller screen browser width home pg video (like screenshot sent last time). And the Explore the Woodbriar text is ontop of the play button icon on smaller screen width? Thanks!

Also can we make the play button larger? (a more comfortable size for viewing)

One last thing – I want to give this code to another programmer (not as proficient as you guys!!) working on the client’s old site so they can also have this feature till we get our new site up and running. I’m not good with code- what do I send them? Is it only this code below? Thanks!

[vc_accordion collapsible="" disable_keyboard="" icons_position="to-left" active_tab="false"][vc_accordion_tab icon="play-circled" icon_closed="play-round-circled" tooltip_position="left" tooltip_action="hover" title="Explore the Woodbriar Advantage" el_id="videorow"][vc_raw_html]JTNDaWZyYW1lJTIwd2lkdGglM0QlMjI4NTMlMjIlMjBoZWlnaHQlM0QlMjI0ODAlMjIlMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy55b3V0dWJlLmNvbSUyRmVtYmVkJTJGRnRvbV9lN0xSaUElMjIlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMjBhbGxvd2Z1bGxzY3JlZW4lM0UlM0MlMkZpZnJhbWUlM0U=

[/vc_raw_html][/vc_accordion_tab][/vc_accordion][/vc_column][/vc_row][vc_row inner_container="yes" section_type="alternate" bg_position="top" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="50" padding_bottom="35" min_height="0" border="bottom" css_animation="right-to-left" text_align="center" bg_color="#000000" el_class="ov-hidden" bg_position_horizontal="left" enable_parallax="" overflow="" visibility=""][vc_column width="1/1"][vc_column_text css_animation="bottom-to-top" animation="animate-when-visible"]

[cbdesign]

Hi please let me know if the code I posted last is the correct code to give someone for my other (older version) of this site to embed the open/close video feature. Thank you!

[cbdesign]

Hi just wondering when I’ll receive an answer to my last question. Thanks!

[cbdesign]

Hi,

Can you please respond to my comments? Will repeat below. Thanks!

Can we make the play button larger? (a more comfortable size for viewing)

Regarding the mobile video area – (I don’t know how to fix) – too much black on top and bottom of smaller screen browser width home pg video (like screenshot sent last time). And the Explore the Woodbriar text is ontop of the play button icon on smaller screen width? Thanks!

One last thing – I want to give this code to another programmer (not as proficient as you guys!!) working on the client’s old site so they can also have this feature till we get our new site up and running. I’m not good with code- what do I send them? Is it only this code below? Thanks!

[vc_accordion collapsible="" disable_keyboard="" icons_position="to-left" active_tab="false"][vc_accordion_tab icon="play-circled" icon_closed="play-round-circled" tooltip_position="left" tooltip_action="hover" title="Explore the Woodbriar Advantage" el_id="videorow"][vc_raw_html]JTNDaWZyYW1lJTIwd2lkdGglM0QlMjI4NTMlMjIlMjBoZWlnaHQlM0QlMjI0ODAlMjIlMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy55b3V0dWJlLmNvbSUyRmVtYmVkJTJGRnRvbV9lN0xSaUElMjIlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMjBhbGxvd2Z1bGxzY3JlZW4lM0UlM0MlMkZpZnJhbWUlM0U=

[/vc_raw_html][/vc_accordion_tab][/vc_accordion][/vc_column][/vc_row][vc_row inner_container="yes" section_type="alternate" bg_position="top" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="50" padding_bottom="35" min_height="0" border="bottom" css_animation="right-to-left" text_align="center" bg_color="#000000" el_class="ov-hidden" bg_position_horizontal="left" enable_parallax="" overflow="" visibility=""][vc_column width="1/1"][vc_column_text css_animation="bottom-to-top" animation="animate-when-visible"]

[Laura]

Hello, sorry for the delay!
For the programmer you should give him the code i sent to you + the css 🙂
I can give you exaclty what you need to give him after we finish it and it looks good.
About the button being larger, what do you mean exactly? Wider? Bigger? Let me know 🙂
Also about the other issues, could you share some screenshots?
Thanks you and sorry again for the delay! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbdesign]

If there’s any chance you can respond by tomorrow would be amazing. Thanks!! 🙂

1. About the button being larger, what do you mean exactly? Wider? Bigger? Let me know 🙂 – Can you please make the “play” button larger? It’s quite small now thanks! (see attached – button too small.png) then attaching a screenshot of the button a little bigger and actually moved down slightly so it’s not so close to the title – see “button larger idea.png”.

2. Also is there a way to add my own button/or icon? Or in general on the site? Because I would love to make the circle around the button a little thinner… but it’s ok for now.

3. Regarding the mobile video area – The Explore the Woodbriar text is ontop of the play button icon on smaller screen width (like screenshot “arrow button” attached)?

4. And there is too much black on top and bottom of smaller screen browser width home pg video. See screenshot attached “video extra black space mobile.png” – red outline around extra black space – this does not show on regular browser screen size only small – is there a way to make it more responsive maybe without messing it up?

Thank you!!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, understood 🙂 Working on it now

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Hello, changed 🙂
To add this to any other website, you should paste it in text editor as:

COPY CODE

[vc_accordion collapsible="" disable_keyboard="" icons_position="to-left" active_tab="false"][vc_accordion_tab icon="play-circled" icon_closed="play-round-circled" tooltip_position="left" tooltip_action="hover" title="Explore the Woodbriar Advantage" el_id="videorow"][vc_raw_html]

JTNDZGl2JTIwY2xhc3MlM0QlMjJ2aWRlb2QlMjIlM0UlM0NpZnJhbWUlMjB3aWR0aCUzRCUyMjg1MyUyMiUyMGhlaWdodCUzRCUyMjQ4MCUyMiUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGd3d3LnlvdXR1YmUuY29tJTJGZW1iZWQlMkZGdG9tX2U3TFJpQSUyMiUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUyMGFsbG93ZnVsbHNjcmVlbiUzRSUzQyUyRmlmcmFtZSUzRSUzQyUyRmRpdiUzRQ==

[/vc_raw_html][vc_raw_html]

JTNDZGl2JTIwY2xhc3MlM0QlMjJtb2JpbGV2JTIyJTNFJTNDaWZyYW1lJTIwd2lkdGglM0QlMjI4NTMlMjIlMjBoZWlnaHQlM0QlMjIxMDAlMjUlMjIlMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy55b3V0dWJlLmNvbSUyRmVtYmVkJTJGRnRvbV9lN0xSaUElMjIlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMjBhbGxvd2Z1bGxzY3JlZW4lM0UlM0MlMkZpZnJhbWUlM0UlM0MlMkZkaXYlM0U=

[/vc_raw_html][/vc_accordion_tab][/vc_accordion]

And in the page CSS

COPY CODE

.panel1 .panel-title a {
    color: white !important;

}
.panel1 .wpb_wrapper {
    background-color: #236a95;
}
.panel1 .panel {
    background-color: #236a95 !important;
}
.panel1 .panel {
    margin-left: 2%;
}
.panel1 .panel {
    border: none !important;
}
span.icon-closed.icon-play-round-circled:before {
margin-top: 3%;
    position: absolute;
    margin-left: 46.6% !important;
    color: white;
    font-size: 23px;
}
.panel-heading {
    height: 80px;
}
span.icon-opened.icon-play-circled:before {
margin-top: 3%;
    position: absolute;
    margin-left: 46.6% !important;
    color: white;
    font-size: 23px;
}
.wpb_video_wrapper {
    width: 70%;
    margin-left: 13%;
}
.panel-body {
    border: none !important;
}
.text4 a:hover {
    color: #236A95 !important;
}
.testimonial-meta {
font-size: 14px !important;
}
.post-meta {
    display: none !important;
}
.news-highlight article {
    width: 49% !important;
    float: left;
    padding-right: 15px;
}
@media (max-width: 991px) {
span.icon-closed.icon-play-round-circled {
    margin-top: 8% !important;
    margin-left: -5% !important;
}
span.icon-opened.icon-play-circled {
    margin-top: 8% !important;
    margin-left: -5% !important;
}
.mobilev {
    display:block !important;
}
.videod {
    display:none;
}
span.icon-closed.icon-play-round-circled:before {
    margin-top: -3% !important;
}
span.icon-opened.icon-play-circled:before {
margin-top: -3%;
}
}
.mobilev {
    display:none;
}

Also attached as a text file

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[cbdesign]

Hi,

I wanted to change the video to a different one and can’t figure out how? I changed in the Video option and it didn’t change the video? The new video is <iframe width=”854″ height=”480″ src=”https://www.youtube.com/embed/CE13z1rW3f0&#8243; frameborder=”0″ allowfullscreen></iframe>

[Laura]

Hello, you need to use the visual composer and edit the element, change the video url, do not use the iframe

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts