[jQuery] Divs toggled independently

[Makarov]

Well I'm trying to have div's display one at a time. How should I do this?

HTML/PHP Code:

while($r = $db->Fetch_Array($result)){
        $user = $db->Select("SELECT * FROM users WHERE username = '".$r['sender']."'");
        while($u = $db->Fetch_Array($user)){
            echo $users->RetrieveHead($u['look']).' <b>From:</b> '.$r['sender'].'<div style="float: right"><a href="#" class="Show">Show</a></div><br />';
            echo '<b>Title:</b> '.$r['title'].'<br />';
            echo '<b>Date:</b> '.$r['date'].'<br />';
            echo '<br />';
            echo '<div class="Mail">'.$r['message'].'</div><br />';
        }
    } 

jQuery

$(document).ready(function(){

        $(".Mail").hide();
        $(".Show").show();

    $('.Show').click(function(){
    $(".Mail").slideToggle();
    });

}); 

Thank you!

[MentaL]

[Hejula]

Not sure I understand but if I do this might be right...

Make .Mail display: none; then $(".Mail").slideDown(time in ms); should make it slide down when you press .Show

E.G.

<style>
.Mail{
display:none;
}
</style>
<script>
$(".Show").click(function (){
$(".Mail").slideDown(3000);
});
</script>
<div class="Show">Lolol</div>
<div class="Mail">Lala placeholder</div>

[holthelper]

UI/API/1.8/Accordion - jQuery JavaScript Library

[foxx]

UI/API/1.8/Accordion - jQuery JavaScript Library

No fucking way lol. jQuery UI is a piece of heavyweight shit. You'd need at least two of it's huge components(not to mention their css framework) to make it work, while you could do it with just a few lines yourself.

Simple jQuery Accordion | CSS-Tricks

[holthelper]

its a suggestion. his choice to accept my suggestion or not.

[jM2.me]

show, hide, slideToggle and similar functions can take a callback function to run once action is completed. Also you can get .Mail count.

With that said you could probably loop through and call .slideToggle on each .Mail element by index (1st, 5th, etc).

Something like that could work, maybe

[foxx]

why would you loop thru anything?

besides what I've given him works just great Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

[s-p-n]

It works as long as the element just next of the clicked link's parent is the one you want to show. Take note this forces you to structure your HTML more strictly. If you want the freedom to have elements in between, change this line:

$(this).parent().next().slideDown();

to this:

$(this).parent().nextAll('#accordion dd').eq(0).slideDown();

Another thing, u can't close the accordion. If you click the element that's open, it closes and opens back up. If you want that functionality, use this:

var e = $(this).parent().nextAll('#accordion dd').eq(0);
    
if( e.css('display') == 'none' )
    e.slideDown();

[Makarov]

Ok so I tried that, not sure if I did it right but it doesn't seem to work

Here is the code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
        
        $('.Show').show();
        //ACCORDION BUTTON ACTION    
    $('.Show').click(function() {
        $('.Mail').slideToggle();    
        $(this).next().slideToggle();
    });
 
    //HIDE THE DIVS ON PAGE LOAD    
    $(".Mail").hide();

});

</script> 

They still open/close the same.

[s-p-n]

Ok so I tried that, not sure if I did it right but it doesn't seem to work

Here is the code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
        
        $('.Show').show();
        //ACCORDION BUTTON ACTION    
    $('.Show').click(function() {
        $('.Mail').slideToggle();    
        $(this).next().slideToggle();
    });
 
    //HIDE THE DIVS ON PAGE LOAD    
    $(".Mail").hide();

});

</script> 

They still open/close the same.

You must use the correct HTML for jQuery and your divs.

If you don't use the tags <dd>, <dl>, or <dt>, then u must format the jQuery to fit whatever tags you are using.

[Makarov]

It works as long as the element just next of the clicked link's parent is the one you want to show. Take note this forces you to structure your HTML more strictly. If you want the freedom to have elements in between.

$(this).parent().nextAll('#accordion dd').eq(0).slideDown();

Your code actually works but it doesn't work correctly.

It's hard to explain so I'll just have a series of screen shots

When clicking the first 'show'

The top opens but closes back up as the bottom stays open even though I did not click that one.

When clicking the second 'show'

All of them expand.

[s-p-n]

Your code actually works but it doesn't work correctly.

It's hard to explain so I'll just have a series of screen shots

When clicking the first 'show'

The top opens but closes back up as the bottom stays open even though I did not click that one.

When clicking the second 'show'
{$r['message']}
All of them expand.

Because your HTML isn't designed for the jQuery you're using.

It works fine here,
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)


Edit:
Try something like this insted,

echo "
<dl id=\"accordion\">
    
    <dt>
        <a style=\"float:right\" href=\"\">Show</a>
        <p><strong>Title:</strong> {$r['title']}</p>
        <p><strong>Date:</strong> {$r['date']}</p>
    </dt>
    <dd> 
        {$r['message']}
    </dd>
</dl>
"; 

As seen here,
http://jsfiddle.net/NV9BU/21/

[jM2.me]

why would you loop thru anything?

besides what I've given him works just great Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

I misunderstood the question/problem. Sorry.

[foxx]

It works as long as the element just next of the clicked link's parent is the one you want to show. Take note this forces you to structure your HTML more strictly. If you want the freedom to have elements in between, change this line:

$(this).parent().next().slideDown();

to this:

$(this).parent().nextAll('#accordion dd').eq(0).slideDown();

Another thing, u can't close the accordion. If you click the element that's open, it closes and opens back up. If you want that functionality, use this:

var e = $(this).parent().nextAll('#accordion dd').eq(0);
    
if( e.css('display') == 'none' )
    e.slideDown();

actually, $(this).closest("dd"); would be better

as well as

if (e.is(":visible")

[s-p-n]

Good going on e.is(":visible"), (just added the !) but closest("dd") won't work because the 'dd' tag isn't an ancestor of the hyper-link.. You must have meant in place of parent rather than the entire line.....

So, anyway, I did find use for closest() in place of the parent() function. Reason I found use for it was because, if the hyper-link was inside an other element, such as a span, paragraph, div, etc- it'll still work (that's why you brought it up?):

$(document).ready(function($) {
    $('#accordion dd').hide();
    $('#accordion dt a').click(function() {
        $('#accordion dd').slideUp();

        var e = $(this).closest("dt").nextAll("dd").eq(0);

        if ( !e.is(":visible") ) {
            e.slideDown();
        }

        return false;
    });
}); 

So, thanks.. More practice I can get in jQuery the better ;)

Firstly it makes every 'dd' child of #accordion display none.
So, starting from the link which was clicked- (which is a child of #accordion.dt), find the closest parent tag 'dt', then find all the siblings after that 'dt' with the tagname 'dd', and return the first element from that list to var 'e'.

If e is not visible, slide it into view.