Hi,
I am working on an author page, that will first display the categories on which the author have posted.
When you click on each of them, I want that the posts lists of this category that he published expands.
I already can display the categories lists and the posts depending of each of them. My problem is that the jquery effect doesn't work.
First, I put my javascript and css codes in the header.php (before </head>):
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready
$(document).ready(function() {
// trigger the function when clicking on an assigned element
$(".toggle").click(function () {
// check the visibility of the next element in the DOM
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("fast"); // slide it down
} else {
$(this).next().hide(); // hide it
}
});
});
</script>
<style type="text/css">
.hiddenDiv{
display:none;
}
</style>
And of course I upload jquery-1.4.2.js in the correct folder. I precise that actually the expand link works with simple texts. So the is no javascript conflict or anything else.
And then I tried this code in my author.php template :
<ul>
<?php
$cat_args = array(
'orderby' => 'name',
'order' => 'ASC',
'child_of' => 0
);
$categories = get_categories($cat_args);
foreach($categories as $category) {
echo '<ul>';
echo '<li> <span class="toggle"><a href="#" style="cursor:pointer;">' . $category->name.'</a></span></li><div class="hiddenDiv">';
$post_args = array(
'category' => $category->term_id
);
$posts = get_posts($post_args);
?>
<?php
foreach($posts as $post) {
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
}
echo '</div>';
echo '</ul>';
}
?>
Everytime I click the link leads to the top that's it. I tried to move hiddenDiv div at some other places in the code, but it doesn't work.
Does anyone has the solution to my problem ?
Thanks