HTML, CSS & JavaScript – What am I missing?

Updated to 3.5. The issue persists.

Sorry, I really don’t understand your comment “Tab contents are hidden by default”. It wouldn’t make sense to show an empty page of “tabs” until triggered. Could someone please log in have a look?

I have followed the steps @ismael provided, adding the JAVASCRIPT since your last comment. The page is still “blank”.

1. Added HTML via a code block
2. Added CSS via Quick CSS
3. Added JAVASCRIPT to functions.php as shown below

function ava_custom_script() {
wp_enqueue_script( ‘my-custom-script’, get_stylesheet_directory_uri().’/js/cbpFWTabs.js‘, array(‘jquery’), 2, true );
}
add_action( ‘init’, ‘ava_custom_script’, 100 );

@pako69 – Extremely grateful for your response. I’m a bit closer, but it’s still not looking anywhere near the demo. Here is what I did.

1. CSS – Did a find (.content) and replace (.full-width-content)
2. CSS – Did a find (.tabs) and replace (.full-width-tabs)
3. CSS – Pasted new CSS into Enfold Quick CSS
4. JS – I followed your “EDIT” by doing a find (this.tabs) and replace (this.full-width-tabs) on the cbpFWTabs.js file
5. JS – Called the JS by adding the following to a Code Block

<script src=”js/cbpFWTabs.js”></script>
<script>
new CBPFWTabs( document.getElementById( ‘tabs’ ) );
</script>

6. HTML – Added to a simple Text block

I’m not sure how to do “Adjust also the path to @font-face according to your child theme path”, but I’ll keeping trying to figure it out. Guessing I need to download a font pack.? If so, not sure where it goes. /themes/enfold-child/fonts ???

Regardless of the @font-face issue, the tabs are not taking shape at all.

Maybe I haven’t done enough with functions.php. Here is what I have.

function ava_custom_script() {
wp_enqueue_script( ‘my-custom-script’, get_stylesheet_directory_uri().’/js/cbpFWTabs.js‘, array(‘jquery’), 2, true );
}
add_action( ‘init’, ‘ava_custom_script’, 100 );

Thanks again,
Ryan

I’m testing this locally, so I would think the relative path method is fine? I have the JS file at the following path and it’s not working.
\htdocs\wordpress\wp-content\themes\enfold-child\js\cbpFWTabs.js

Downloaded the demo. Here is what I have and it’s also not working.
\htdocs\wordpress\wp-content\themes\enfold-child\fonts\icomoon

Here is a snippet of what I have in Quick CSS.
@font-face {
font-family: ‘icomoon’;
src:url(‘../fonts/icomoon/icomoon.eot?pvm5gj’);
src:url(‘../fonts/icomoon/icomoon.eot?#iefixpvm5gj’) format(’embedded-opentype’),
url(‘../fonts/icomoon/icomoon.woff?pvm5gj’) format(‘woff’),
url(‘../fonts/icomoon/icomoon.ttf?pvm5gj’) format(‘truetype’),
url(‘../fonts/icomoon/icomoon.svg?pvm5gj#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
} /* Icons created with icomoon.io/app */

Thanks. Think I’m just going to give up on this. It doesn’t matter what path I put in…it doesn’t work. I’ve tried Relative Paths and Absolute Paths. I’ve tried online dev and local dev.

The message board knows the locations of what I’m trying to call. If someone can tell me the EXACT PATH…great. Frustrated.

\htdocs\wordpress\wp-content\themes\enfold-child\fonts\icomoon
\htdocs\wordpress\wp-content\themes\enfold-child\js\cbpFWTabs.js

Yes, I’m well aware of the policy. However, I have helped people on here, when I’m not paid to do so and when it’s not specifically an Enfold/WordPress issue. It’s called community and it’s called paying it forward. While some are stronger in some areas, others are stronger in their respective areas.

This makes me not want to help anyone on here. Sad.