Yeah, i’m not that familiar with JavaScript at all, but I have a need to add some nice functionality to a plugin i’m trying to create and jQuery (for me) would be the logical choice. I can’t seem to get jQuery to work though even though I have read multiple blog posts on the topic. Something is clearly wrong with my code. If you don’t mind taking a peek, I’ve shown the pertinent information of the plugin and the javascript file. Any help would be greatly appreciated!
The Goal: Simply use jQuery to toggle the <div> with the id “level2details” from visible/non-visible and vice-versa with each click on <div> with the id “toggle”.
Plugin Code (some parts removed for clarity)
<?php
function start_jquery() {
wp_enqueue_script('jquery');
}
add_action('init', 'start_jquery');
function pluginname_page() {
if (!current_user_can('manage_options')) {
wp_die( __('You do not have sufficient permissions to access this page.') );
}
echo '<div class="wrap">';
?>
<script type="text/javascript" src="/js/pluginname.js"></script>
<div>
<div id="level1"><a href="#">General Fund</a></div>
<div id="toggle"><a href="#">Level 2</a></div>
<div id="level2details">This is a test</div>
</div>
<?php
echo '</div>';
}
?>
Javascript File Code
jQuery(document).ready(function(){
jQuery('#toggle').click(function(){
if($jQuery('#level2details').is(':visible')) {
jQuery('#level2details').hide();
} else {
jQuery('#level2details').show();
}
});
});