WordPress.org

Ready to get started?Download WordPress

Forums

Problem with expanding category list menu (1 post)

  1. triphys
    Member
    Posted 1 year ago #

    Hi,

    What I want is a category list in my sidebar that shows all my choosen categories and the post titles of all the posts in that list, and that works. But I want to be able to click the Title of the category and have all the posts pop down in a list underneath.

    Currently I'm using this code to show the categories and their posts in the list:

    <div class="sidebarcontainer">
    		<?php
    		$cats = get_categories("orderby=ID&order=DESC&exclude=7");
    		// loop through the categries
                    foreach ($cats as $cat) {
                        // setup the cateogory ID
                        $cat_id= $cat->term_id;
                        // Make a header for the cateogry
                        echo "<p>".$cat->name."</p>";
                        // create a custom wordpress query
                        query_posts("cat=$cat_id&post_per_page=100&show_count=1&orderby=ID&order=ASC");
                        // start the wordpress loop!
                        if (have_posts()) : while (have_posts()) : the_post(); ?>
    
                            <?php // create our link now that the post is setup ?>
                            <a href="<?php the_permalink();?>">&nbsp;&nbsp;- <?php the_title(); ?></a>
                            <?php echo '</br>'; ?>
    
                        <?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
                    <?php } // done the foreach statement ?>
    		</div>

    That code works great! But not for clicking the titles, so I found this small snippet that I thought I could use:

    <div class="msg_list">
    <p class="msg_head">Header-1 </p>
    <div class="msg_body">
    orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
    </div>
    </div>

    And then finishing of with this code:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
      //hide the all of the element with class msg_body
      $(".msg_body").hide();
      //toggle the componenet with class msg_body
      $(".msg_head").click(function()
      {
        $(this).next(".msg_body").slideToggle(600);
      });
    });
    </script>

    So far it seems okay changing this:
    <a href="<?php the_permalink();?>">&nbsp;&nbsp;- <?php the_title(); ?></a>
    to this:
    <div class="msg_body"><a href="<?php the_permalink();?>">&nbsp;&nbsp;- <?php the_title(); ?></a></div>

    But to make the title clickable I thought I would go ahead and changing this:
    echo "<p>".$cat->name."</p>";
    to this:
    echo "<p class="msg_head">".$cat->name."</p>";

    But that doesn't work, it just won't work at all and now I'm stuck and have no idea what to do.

    Would be really nice with some help on what I'm doing wrong! Thank you very much!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.