Problems with Genesis + Javascript

[Eric Emanuel]

Hello, everyone!

I'm pretty new in webdesign and specially with Genesis, still trying to figure out how it works. i'm trying to run a very simples 'expand and collapse' javascript file in a site i'm testing locally but can't manage to make it work.

I've already loaded the file in my functions.php using this:

add_action( 'wp_enqueue_scripts', 'kme_load_scripts' );
function kme_load_scripts(){

	wp_enqueue_script('kmeexpandcollapse', get_stylesheet_directory_uri() . '/js/kmeexpandcollapse.js', array('jquery'), '1.0.0', false);

My javascript code:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>

And I added the following HTML inside the content area of my test page in WordPress. I don't even know if this is the right place but it was the only one I found that let me implement some custom HTML:

<div class="layer1">

<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

</div>

This is the result I want to achieve.

Thanks for your time!

[James]

hi there

are you using the <script type="text/javascript"> in your jquery, as this won't work

instead try this

'

jQuery(function( $ ){

$(".content").hide();

//toggle the componenet with class msg_body
$(".heading").click(function(){
$(this).next(".content").slideToggle(500);
});

});

'

[Eric Emanuel]

I've changed my code to yours, but no success yet... I click on the headers and nothing happens.
Do you have another idea of what could be wrong?

[James]

hey there

you want a simple expand on click, collapse on click, just like i did here on a client site (scroll to the bottom of the content)

http://thefacialroom.com.au/services/facials/

[Eric Emanuel]

Yes, that's exactly what I want!
I've been struggling with this for hours now, it can't be that hard...

[James]

just give me a few minutes and i'll have that for you.

[Eric Emanuel]

Thanks for your attention, Jamie, I really appreciate it =)

[James]

no problem

be about 5 more minutes...

[James]

here you go

http://jamiemitchelldesign.com.au/create-an-accordion-toggle-in-genesis/

[Eric Emanuel]

Wow, you've created a whole class just for me? Amazing!
Thanks a lot, I'll implement it and let you know about the results =)

[Eric Emanuel]

Worked like a charm! Thank you, my friend, you're the best!
Your bonus section is also very helpful, I'll study and use this knowledge from now on! =D

Do you mind if I contact you if I have any more of these newbie questions?

Thank you very much!

[James]

No problem at all

Your more than welcome to contact me anytime

if you have any theme issues, try and post on the forum here when you can, that way others can learn as well.

🙂

[Eric Emanuel]

I will, thanks again!

[Author]

Posts