Community Forums › Forums › Archived Forums › General Discussion › Problems with Genesis + Javascript
Tagged: genesis, javascript, jquery, problems
- This topic has 12 replies, 2 voices, and was last updated 9 years, 1 month ago by
Eric Emanuel.
-
AuthorPosts
-
December 28, 2015 at 7:21 pm #174989
Eric Emanuel
MemberHello, 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!
December 28, 2015 at 9:00 pm #174993James
Participanthi 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);
});});
'
December 28, 2015 at 9:14 pm #174998Eric Emanuel
MemberI'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?December 28, 2015 at 9:32 pm #175002James
Participanthey 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)
December 28, 2015 at 9:36 pm #175003Eric Emanuel
MemberYes, that's exactly what I want!
I've been struggling with this for hours now, it can't be that hard...December 28, 2015 at 9:38 pm #175006James
Participantjust give me a few minutes and i'll have that for you.
December 28, 2015 at 10:04 pm #175014Eric Emanuel
MemberThanks for your attention, Jamie, I really appreciate it =)
December 28, 2015 at 10:06 pm #175015James
Participantno problem
be about 5 more minutes...
December 28, 2015 at 10:40 pm #175022James
ParticipantDecember 28, 2015 at 10:46 pm #175023Eric Emanuel
MemberWow, you've created a whole class just for me? Amazing!
Thanks a lot, I'll implement it and let you know about the results =)December 28, 2015 at 11:02 pm #175025Eric Emanuel
MemberWorked 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! =DDo you mind if I contact you if I have any more of these newbie questions?
Thank you very much!
December 28, 2015 at 11:04 pm #175026James
ParticipantNo 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.
🙂
December 28, 2015 at 11:14 pm #175028Eric Emanuel
MemberI will, thanks again!
-
AuthorPosts
- The topic ‘Problems with Genesis + Javascript’ is closed to new replies.