If you want to transform jQ in a way that only the post headings are displayed on index pages, there’s a very easy method to achieve this. The one thing you have to do is editing the file theme.js which is located in /wp-content/themes/jQ/lib/js/.
Replace the code inside the file with the following:
$(document).ready(function(){
//Superfish menu
$("ul.sf-menu").supersubs().superfish(
{
delay: 1000, // one second delay on mouseout
animation: {opacity:'show'}, // fade-in and slide-down animation
speed: 'normal', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
}
);
//Toggle functions
$(".excerpt").hide();
$(".hide-excerpt").click(function (event) {
event.preventDefault();
$(this).parents(".excerpt").hide("normal");
});
$(".view-excerpt").toggle(
function(){
$(this).parents(".headline").next(".excerpt").show("normal");
}, function() {
$(this).parents(".headline").next(".excerpt").hide("normal");
});
$("#toggle-all").toggle(
function(){
$(".excerpt").show('slow');
$("#toggle").attr("class","show-all");
}, function() {
$(".excerpt").hide('slow');
$("#toggle").attr("class","hide-all");
});
});
This hides all post content by default. It also switches the controls, so that you can show the post content properly by clicking, instead of hiding it when it is hidden anyway.
Now, there’s just one thing left to do. Go to your sidebar.php file. In line 2 you will find the following:
<p id="toggle-all"><a href="#" id="toggle" class="hide-all">Toggle posts</a></p>
Replace line 2 with this:
<p id="toggle-all"><a href="#" id="toggle" class="show-all">Toggle posts</a></p>
The new line will effect the image of the “toggle-all” link on top of the sidebar. Now you see “+” instead of “-” when loading the page. That’s it, the appearence of the theme should have changed. One further note: I consider it reasonable to offer the user at least some content of a web page directly. To show the content of the first post of your index (while of course keeping the others hidden), add this
$(".excerpt:first").show();
to your theme.js, right after:
$(".excerpt").hide();
Anything else to mention?
