Category Posts Not Collapsing

[26985]

Hi everyone,I'm new to these forums and signed up in the hopes that I might be able to get help on this specific problem I'm having. I'm using Wordpress for my website and am trying to get my posts in my various categories to stay collapsed. As you can see, all the latests posts on my website are collapsed. However, when you go to Work and select a category, they all show up at once on the page - bit messy really. I'm certain there is a way to change this, just not sure how to?Did a bit of searching and found out that it's got something to do with the javascript used (this is my actual script) for the functionality of the site as pointed out in this topic.Does anybody know how to get this functionality working for the categories? You'd be an absolute lifesaver if you do as this problem is stopping me from making some essential layout changes to my site.

[26985]

Sorry to bump this topic, but is there nobody who might know how to fix this problem?Any help would be appreciated, have tried everything (within the capacity of what I know...which is quite little) and I'm quite desperate.

[justsomeguy]

It's a little difficult to offer suggestions for a CMS like WordPress with themes without being familiar with how all of that works. One thing I notice in your Javascript is that you use the same variable name for both accordion objects, you might want to change that. I also see that there's a Javascript error in Mootools on the category page, it's difficult to debug that though because the Mootools source is minified. It looks like there's an error in the addSection function, where it's being passed a null value for an element from the initialize function.

[26985]

Hi justsomeguy,Thanks for your reply! If I'm honest, I have no idea what all that means. Total newbie here (annoying I know..). If it helps, this is what my wordpress template is made up of:404 Template(404.php)Archives(archive.php)Comments(comments.php)Footer(footer.php)Header(header.php)Main Index Template(index.php)Page Template(page.php)Search Form(searchform.php)Search Results(search.php)Sidebar(sidebar.php)Single Post(single.php)Theme Functions(functions.php)I've gone into the mootools js file for the template but it is so damn confusing I didn't even know where to start. How would I change the variable name for both accordion objects to a more suitable one that might fix the problem? Also, where would I find the addSection part, and what would I need to change?Forgive all the questions and my experience level, but any help is greatly appreciated. I guess we all start somewhere..

[justsomeguy]

How would I change the variable name for both accordion objects to a more suitable one that might fix the problem?

You called both of them myAccordion, so the second one is overwriting the first. You can change either one, you can just add a 2 on the end of the name if you want to. That's in the code you linked to on the pastebin site.

Also, where would I find the addSection part, and what would I need to change?

I doubt you need to change Mootools, I'm sure the problem is how Mootools is being used instead of the library itself. It would be easier to figure out what's going on if you used an uncompressed version of Mootools instead of the compressed or minified code. What you see in mootools.js is Javascript code that has been minified to remove whitespace and comments, replace meaningful variable names with shorter 1-character names, etc, to make the code smaller for download. That ends up with smaller code, but it's much harder to debug. I can tell from Firebug that the addSection method got called by initialize, which got called by another initialize, but it's hard to tell which objects those methods are a part of.I did notice that you're using both jQuery and Mootools, which sometimes can cause problems due to the fact that every Javascript framework on the planet decided that the dollar sign was the perfect identifier to use for their base class.

[26985]

Thanks for taking the time to explain. I've added a 2 to the end of the second myAccordion, but still having the same problem. This is really weird. So confused so to why the script doesn't just apply to the whole site..That's the only mootools file I've got for the template am afraid. Not quite sure how to get the uncompressed version. So I guess it begs the question, where do we go from here? Would you be able to fix it? I would honestly try myself but this is way above what I am even able to begin to comprehend. I'm ok at HTML and CSS and can make most changes that I need to my site...but this...phew..Edit: Would I be able to disable jquery safely to see if that fixes the problem?

[justsomeguy]

It looks like you're using version 1.2.0 of Mootools. That version isn't publicly available anymore, but you can download the uncompressed version of 1.2.5 here:http://mootools.net/download/version/1.2.5It looks like 1.2 is available here:http://mootools.net/download/version/1.2You can always just remove the links to jQuery and see what happens, put them back if things break. Make sure you're checking for Javascript errors though, don't just check to see how it looks in the browser.

[26985]

Ooh, so (if I've got this right) the mootools I'm using hasn't been written specifically for my template, but instead is an all round thing that can be used by anyone? I thought it was a script that the guy who made the theme wrote..So I just overwrite my existing one with the new js file, obviously making sure the file name is the same?

[justsomeguy]

Ooh, so (if I've got this right) the mootools I'm using hasn't been written specifically for my template, but instead is an all round thing that can be used by anyone? I thought it was a script that the guy who made the theme wrote..

Right, libraries like Mootools, jQuery, prototype, etc are all publicly-available Javascript libraries. Google even hosts many of them so that you can link to Google's copy for faster loading and cross-site caching:http://code.google.com/apis/libraries/

So I just overwrite my existing one with the new js file, obviously making sure the file name is the same?

You can download the code and replace your file, or you can also link directly to one of Google's copies in the script tag:http://ajax.googleapis.com/ajax/libs/mooto...2.1/mootools.js

[26985]

Wow, that's amazing...had no idea. Thanks for the info!I've updated. Just opened the one I had on my server and copied and pasted the code from the new one and replaced the old one with it. Are you able to debug it now, or do I need to do something else?Also, where would I find the iquery links?

[thescientist]

you can debug too. When it runs, check your browser for any javascript errors.

[26985]

How do I do that? A little confused again. What should I do now to get the category posts to collapse?

[justsomeguy]

It's not even loading the accordion now, so that must have been defined in the old file but not in the new one. Mootools has a ton of custom builds, so chances are they are distributing a certain version which includes the custom things they need. Take the original Javascript code and run it through this, then save it back:http://jsbeautifier.org/I don't know which files the links to jQuery are in, but there are a couple script tags which include parts of it. I can see that jquery.form.js and jquery.js are both being included.

[26985]

Done (As in beautifying the code). How's it looking now? Really appreciate you helping me with this.Have looked through all of the template files (Php files listed above) but can't find the links. Shall keep looking.

[justsomeguy]

I think the problem is because you have an h2 with a class of contentheader for "conceptual" but no div with a class of content after it.

[26985]

Hmm, I dunno. This is what my archives.php looks like and it does have a content div on it:

<?php get_header(); ?><?php get_sidebar(); ?><div id="wrapper" class="clearfix" > <div id="maincol" ><?php if (have_posts()) : ?> 	  <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> 	  <?php /* If this is a category archive */ if (is_category()) { ?>		<h2 class="contentheader">‘<?php single_cat_title(); ?>’ </h2> 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>		<h2 class="contentheader">Posts Tagged ‘<?php single_tag_title(); ?>’</h2> 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>		<h2 class="contentheader">News for <?php the_time('F jS Y'); ?></h2> 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>		<h2 class="contentheader">News for <?php the_time('F Y'); ?></h2> 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>		<h2 class="contentheader">News for <?php the_time('Y'); ?></h2>	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>		<h2 class="contentheader">Author News Archive</h2> 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>		<h2 class="contentheader">Blog Archives</h2> 	  <?php } ?><?php while (have_posts()) : the_post(); ?><h2 class="contentheader"><?php the_title(); ?></h2><div class="content"><?php the_content() ?><div id="postinfotext"></div></div><?php endwhile; ?><?php else : ?><?php endif; ?></div></div><?php get_footer(); ?>

And for your reference this is my main index.php:

<?php get_header(); ?><?php get_sidebar(); ?><div id="wrapper" class="clearfix" > <div id="maincol" ><?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?><h2 class="contentheader"><?php the_title(); ?></h2><div class="content"><?php the_content('Read more »'); ?><?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?></div>	<?php endwhile; ?><div class="navigation"><span class="prevlink"><?php next_posts_link('PREVIOUS') ?></span><span class="nextlink"><?php previous_posts_link('NEXT') ?></span></div>		<?php else : ?><h2 class="contentheader">Not found!</h2><p>Could not find the requested page. Use the navigation menu to find your target, or use the search box below:</p><?php include (TEMPLATEPATH . "/searchform.php"); ?><?php endif; ?></div></div><?php get_footer(); ?>

Or am I wrong?Edit: I've tried inserting a content div in between some of these:

	  <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> 	  <?php /* If this is a category archive */ if (is_category()) { ?>		<h2 class="contentheader">‘<?php single_cat_title(); ?>’ </h2> 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>		<h2 class="contentheader">Posts Tagged ‘<?php single_tag_title(); ?>’</h2> 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>		<h2 class="contentheader">News for <?php the_time('F jS Y'); ?></h2> 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>		<h2 class="contentheader">News for <?php the_time('F Y'); ?></h2> 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>		<h2 class="contentheader">News for <?php the_time('Y'); ?></h2>	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>		<h2 class="contentheader">Author News Archive</h2> 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>		<h2 class="contentheader">Blog Archives</h2> 	  <?php } ?>

But it just makes the whole category collapse and then when you uncollapse it and try and select an entry it just re collapses the whole thing...so weird. I've left one in underneath:

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> 	  <?php /* If this is a category archive */ if (is_category()) { ?>		<h2 class="contentheader">‘<?php single_cat_title(); ?>’ </h2>

So you can see what I mean. It's close...but not quite!

[justsomeguy]

Open Firefox and install the Firebug extension from getfirebug.com. Once it's installed, use the Tools menu to enable and open Firebug, and then go to your page that is working. In the Firebug window, click on the HTML tab. In the HTML tab, click to expand the body element, then the page div, then the wrapper div, then the maincol div. Inside maincol you'll see a series of alternating h2 and div elements. That is the structure the accordion is expecting. The problem I saw (the page is different now) was that in the category page you had an h2 without a div after it. Compare the markup on the other pages to check for the structure of alternating h2 and divs.

[26985]

They both seem to be the same. I'm using Chrome so I just used the 'Inspect Element' Function. Page that's not working: http://i.min.us/iccdek.pngPage that is working: http://i.min.us/ieslCm.pngHmm..

[justsomeguy]

Technically speaking, the page that's not working actually is working. It has 1 category to expand, and 1 content div. It's attaching events to the inner elements also, but when you click the category title it does expand, which is what it's supposed to do. The other page just has more than one h2/div pair in the list. That's how you need to structure your pages.

[26985]

Ok. I completely understand what you mean and what needs doing. However, I don't know how to do it..Thing is, when you go into.. say..Conceptual. I don't want to have to click the word again for it to collapse and show the posts. I'd just like the posts themselves to be collapsable. If that makes sense?Edit: Yeah, I'm looking at the code and I really don't know what to do..

[thescientist]

Ok. I completely understand what you mean and what needs doing. However, I don't know how to do it..

Technically speaking, the page that's not working actually is working. It has 1 category to expand, and 1 content div. It's attaching events to the inner elements also, but when you click the category title it does expand, which is what it's supposed to do. The other page just has more than one h2/div pair in the list. That's how you need to structure your pages.

It appears you need to make more options available. More h2 and div tags.

Thing is, when you go into.. say..Conceptual. I don't want to have to click the word again for it to collapse and show the posts. I'd just like the posts themselves to be collapsable. If that makes sense?

So it sounds like you have these categories, and then within that there is "menu". So it sounds like you want this nested list (posts) to be collapsible, could you not just attach the same functionality to the HTML elements that you are using for your posts, like you are doing to the h2/div tags?

[26985]

Holy ######!! I did it This is what I did:

<?php get_header(); ?><?php get_sidebar(); ?><div id="wrapper" class="clearfix" > <div id="maincol" ><?php if (have_posts()) : ?><div class="content"> 	  <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> 	  <?php /* If this is a category archive */ if (is_category()) { ?>		<h2 class="contentheader">‘<?php single_cat_title(); ?>’ </h2> 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>		<h2 class="contentheader">Posts Tagged ‘<?php single_tag_title(); ?>’</h2> 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>		<h2 class="contentheader">News for <?php the_time('F jS Y'); ?></h2> 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>		<h2 class="contentheader">News for <?php the_time('F Y'); ?></h2> 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>		<h2 class="contentheader">News for <?php the_time('Y'); ?></h2>	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>		<h2 class="contentheader">Author News Archive</h2> 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>		<h2 class="contentheader">Blog Archives</h2> 	  <?php } ?></div><?php while (have_posts()) : the_post(); ?><h2 class="contentheader"><?php the_title(); ?></h2><div class="content"><?php the_content() ?><div id="postinfotext"></div></div><?php endwhile; ?><?php else : ?><?php endif; ?></div></div><?php get_footer(); ?>

justsomeguy, I can't thank you enough. Thank you for your help, your patience with all of my question and thank you for being the fountain of knowledge that you are. It is greatly appreciated!

[26985]

@thescientist, I think that's kinda what I've done? Although when you select a category, while the page is loading, the title briefly appears and then disappears but at least all the posts are collapsed. I'm happy right now, but it would be a bonus if this could be improved upon. What do you think?