Quantcast
Channel: WordPress › Support » Forum: Hacks - Recent Topics
Viewing all articles
Browse latest Browse all 8245

onirisweb on "expand posts titles from a category"

$
0
0

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


Viewing all articles
Browse latest Browse all 8245

Trending Articles