This is an easy way to grab all the option values from any regular html select, and print them to your Firebug console as a comma separated list. (I found this useful when I needed to grab the state names listed on a previous version of a company website.)
var newArray = [];
var list = $('#selectID').find('option');
for(var i = 0; i < list.length; i++) {
newArray[i] = list[i].text;
}
console.log(newArray.join(", "));
I created this accordion menu rather on accident. (See my previous post, ). I was actually writing jQuery to make a show/hide question answer list, and realized it would be really easy to turn it into an accordion menu.
Here’s the result:
How to create it:
1. Include the jQuery library in your page with a script tag. Example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script>
This example links directly to the jQuery library hosted on google. You may link to your own copy.
2. Create a new .js document, and add this code:
$(document).ready(function(){
$("ul.hidden").hide();
$("a.toggleLink").click(function () {
$("ul.hidden").not($(this).next("ul:first")).slideUp();
$(this).next("ul:first").slideToggle("normal");
});
});
Add this file using the <script> tag.
3. Add this to the body of your page:
<ul id="accordian_menu">
<li><a href="#" class="toggleLink">Our Company</a>
<ul class="hidden">
<li><a href="#">About Us</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#" class="toggleLink">Products/Services</a>
<ul class="hidden">
<li><a href="#">Custom Web Design</a></li>
<li><a href="#">Content Management Solutions</a></li>
<li><a href="#">Website Optimization</a></li>
<li><a href="#">Email Campaigns</a></li>
</ul>
</li>
<li><a href="#" class="toggleLink">Portfolio</a>
<ul class="hidden">
<li><a href="#">Static HTML</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Emails</a></li>
</ul>
</li>
<li><a href="#" class="toggleLink">Contact</a>
<ul class="hidden">
<li><a href="#">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Request a Quote</a></li>
</ul>
</li>
</ul>
4. Add these classes to your stylesheet:
a {
text-decoration: none;
}
a.toggleLink {
display: block;
padding: 5px;
background: #936;
color: white;
border-bottom:1px dotted #CC99CC;
}
ul#accordian_menu {
margin: 0;
padding: 0;
width: 150px;
}
ul#accordian_menu li {
list-style-type: none;
}
ul#accordian_menu li ul {
padding-left: 0;
background: #FFDAEE;
}
ul#accordian_menu li ul li {
}
ul#accordian_menu li ul li a:hover {
background: white;
}
ul#accordian_menu li ul li a {
color: #936;
display: block;
border-bottom: 1px dotted #C9C;
padding: 5px;
}
These classes could probably be refined a little, but I kept them pretty specific so they won’t conflict with any similar markup that might be in your page. Feel free to rename or change them to suit your needs.
Take it further:
Use divs or paragraphs instead of list items to make a show/hide section of content.
Note: If you’re new to jQuery, you only need to include the $(document).ready(function()) once in your javascript document–wrap it around all of your functions.
You could add your custom jQuery to Wordpress by using the script tag in your head template, but this method can cause conflicts with JavaScript in other Wordpress plugins.
Instead, use the wp_enqueue_script, the Wordpress-friendly method. You will need direct access to your Wordpress files.
<?php
wp_enqueue_script('custom',
'/' . PLUGINDIR . '/javascript/yourscript.js',
array('jquery'),
'1.0' );
?>
That’s it. You don’t need to do anything additional to include the jQuery library, since it’s specified as in the array as a file that your script is dependent upon. In place of ‘jquery’ you can use Scriptaculous, jQuery UI Tabs, or any number of libraries that are built into Wordpress.
Those libraries, as well as additional information about the wp_enqueue_script can be found at codex.wordpress.org/Function_Reference/wp_enqueue_script.
According to the codex, this script can’t be placed above <?php wp_head(); ?>, but I’ve found that on the contrary, it works ONLY when placed above it. This same page of the codex also says that ‘$’ can be used instead of ‘jQuery’ inside the document ready function, which is also currently not accurate.
In other words, where you would use ‘$’ in your jQuery function, you MUST use ‘jQuery’ for every instance, not just in the document ready function. Feel free to test this with your own script; I’m not sure why the Codex is wrong on these points.
Here’s a neat little script that allows a question and answer type format, where the questions are all listed as links, and clicking on one toggles the visibility of the corresponding answer.
$("p").hide();
$("a").click(function () {
$(this).next("p:first").slideToggle("fast");
});
Here’s a version for lists that can be used to build an accordion navigation menu:
$("ul li ul").hide();
$("a").click(function () {
$(this).next("ul:first").slideToggle("fast");
});
Thanks to this post on Stackoverflow for the inspiration:
http://stackoverflow.com/questions/248320/using-this-with-jquery-selectors/248335
My selectors allow you to have multiple questions listed on one page. The answers given to the question on Stackoverflow only allowed for one, since, if clicked, it would toggle ALL of the paragraphs simultaneously.
If you want to use variables in combination with CSS-style selectors like so:
$("#navigation a.myHomePage, " + logo).hover(function() {
$("li.home").addClass("homeRoll");
}, (function() {
$("li.home").removeClass("homeRoll");
});
Make sure your variable homePageImage is written as a string:
var homePageImage = "#logo"
not an object:
var homePageImage = $("#logo")
or it won’t work.