[jQuery] Jquery toggle headache
Hi people,
I have this issue I could need some help with resolving. It's driving
me crazy.
Imagine an email inbox made up from an unordered list (ul) and all the
list items that show the subject, date etc. Pretty basic stuff really
(kinda like your hotmail or gmail inbox). Instead of going to the
'read message' page I want the message to appear on the same page,
underneath the subject when the li or subject is clicked. The data is
being fetched with a post, and the response is placed in a hidden list
item that is made visible when the response is received. When the li
or subject link is clicked again, the message is closed. Also, there's
only one message that can be opened, so if there's a message open, and
another subject is clicked, the open one closes and the new one is
displayed.
It's sort of working, but the toggle seems to be acting weird. Can
someone please go over the code and tell me what I might be doing
wrong?
I have this so far:
jQuery:
function readmail (mail_code) {
// Activate toggle on li
$('#'+ mail_code).toggle(function(){ // first toggle part
$.post("../../test/"+ mail_code, {
}, function(response){
// Hide the spinner
$("#spinner-"+ mail_code).fadeOut(500);
// Populate the prepared p-element with the response
$("#prep-"+ mail_code).html(response).fadeIn(500);
});
// Remove the 'new' highlight in case it's there
// Add new class to indicate this is the one opened
$('#'+ mail_code).removeClass('highlight bold
highlight_active').addClass('highlight_active').filter(".highlight_active");
},function(){ // next toggle part
// Close the p-element
$("#prep-"+ mail_code).fadeOut(500);
});
return false;
};
The list (I've left the php intact):
<ul class="mailbox-list">
<li>
<?php foreach($query as $row): ?>
<?php if ($row->mail_status == 0): ?>
<li class="highlight bold" id="<?=$row->mail_code?>">
<?php else : ?>
<li id="<?=$row->mail_code?>" target="<?=$row->mail_code?>">
<?php endif; ?>
<p class="subject"><a class="<?=$row->mail_code?>" href="<?=$row-