jQuery and PHP Variables and Toggling

JavaScript
1

I’m trying to have multiple ‘links’ on my page, all linked to a jQuery effect which toggles between showing/hiding text.

There is going to be a total of 60 show/hide links on the page, so I was hoping that with each link, a unique ID could be assigned, so I would only need to write the jQuery once.

Here’s the code:
(NOTE: PHP $ID_001 would normally be a unique ID from the database with whatever text it had in it’s row etc)

<script>
$(document).ready(function() {
 
////////////////////
// Show/Hide Text //
////////////////////
                
var id = $("#toggle").attr("name");
        
$("#more_" + id + "").click(function(event){
                                
    $("#content_short_" + id + "").slideUp("fast");
                    
    $("#content_short_" + id + "").queue(function () {
        $("#content_full_" + id + "").slideDown("slow");
        $("#content_full_" + id + "").dequeue();
    });
                    
       $("#more_" + id + "").hide();
    $("#less_" + id + "").fadeIn("slow");
});
            
$("#less_" + id + "").click(function(event){
                                                        
    $("#content_full_" + id + "").slideUp("slow");
                    
    $("#content_full_" + id + "").queue(function () {
        $("#content_short_" + id + "").slideDown("fast");
        $("#content_short_" + id + "").dequeue();
    });
                    
    $("#less_" + id + "").hide();
    $("#more_" + id + "").fadeIn("slow");
});
     
});
</script>

<?
	$ID_001 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum nisi urna, id tempus diam. Integer dignissim mauris ut orci suscipit gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sapien leo, sollicitudin ac fermentum et, suscipit eu mi. Vestibulum et sapien vel mi auctor facilisis. Curabitur interdum, elit nec semper vehicula, eros dolor rutrum arcu, a faucibus dolor tellus at dui. Vestibulum aliquam tellus a mi ornare sodales. Nam ut mattis orci. Mauris in dolor purus, laoreet semper quam. Nunc sit amet nibh at metus pretium dictum.<p></p>Fusce non orci metus. Nunc eget sem ullamcorper velit tincidunt iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet risus justo, at pharetra quam. Curabitur convallis viverra est et interdum. Suspendisse quis quam sed orci lobortis venenatis. Pellentesque auctor aliquam nunc, ut euismod velit ultrices at. Sed in molestie nisi. Vivamus elementum erat ut nulla egestas porttitor. Curabitur consequat dictum pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac orci eros, nec posuere mauris. Pellentesque sit amet arcu sit amet elit sollicitudin condimentum ac in nisl. Cras vitae leo sed risus pharetra luctus in vel lacus. Phasellus varius adipiscing tortor non auctor. Morbi ut sem libero, vel tristique est. Aliquam erat volutpat. Etiam nec risus eget magna mattis elementum.";

	$ID_001_short = substr($ID_001,0,300);
?>

<span id="content_short_ID_001"><? echo("$ID_001_short"); ?></span><span id="content_full_ID_001" style="display: none;"><? echo("$ID_001"); ?></span>

<div id="toggle" name="ID_001"> <span id="more_ID_001">[ <a href="#">Show More</a> ]</span><span id="less_ID_001" style="display: none;">[ <a href="#">Show Less</a> ]</span></div>

As you can see, the jQuery is getting a value from the name attribute of the <div> “toggle”, and then assigning it to the ID variable in the jQuery.

That works fine, however my problem is, if I was to add another text display (IE take another row from the database), which would then change the unique ID number, when both are displayed I then have the problem of their being 2 divs with the id of “toggle” and one of them won’t work.

So I assume that I have to tell it which toggle it is, but this is my problem, I don’t know how I could do that without having to write a jQuery for each show/hide link (60 times), but that would be so over crowded, with what to me would be unnecessary code…

I’m probably overlooking something so stupidly easy to solve my problem, and thinking about it too much.

I’ve done all this by myself so far and now come to a standstill, I only started using jQuery the other night and my Javascript knowledge has always been pretty limited too, so I’m pleased I’ve got everything working so far but need help just finishing it off.

Here’s the whole code, with both texts in there, one working the other idly sitting there doing bugger all :frowning:

<script src="includes/js/jquery.js" type="text/javascript"></script> 
<script>
$(document).ready(function() {
 
////////////////////
// Show/Hide Text //
////////////////////
                
var id = $("#toggle").attr("name");
        
$("#more_" + id + "").click(function(event){
                                
    $("#content_short_" + id + "").slideUp("fast");
                    
    $("#content_short_" + id + "").queue(function () {
        $("#content_full_" + id + "").slideDown("slow");
        $("#content_full_" + id + "").dequeue();
    });
                    
       $("#more_" + id + "").hide();
    $("#less_" + id + "").fadeIn("slow");
});
            
$("#less_" + id + "").click(function(event){
                                                        
    $("#content_full_" + id + "").slideUp("slow");
                    
    $("#content_full_" + id + "").queue(function () {
        $("#content_short_" + id + "").slideDown("fast");
        $("#content_short_" + id + "").dequeue();
    });
                    
    $("#less_" + id + "").hide();
    $("#more_" + id + "").fadeIn("slow");
});
     
});
</script>

<body>

<?
    $ID_001 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum nisi urna, id tempus diam. Integer dignissim mauris ut orci suscipit gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sapien leo, sollicitudin ac fermentum et, suscipit eu mi. Vestibulum et sapien vel mi auctor facilisis. Curabitur interdum, elit nec semper vehicula, eros dolor rutrum arcu, a faucibus dolor tellus at dui. Vestibulum aliquam tellus a mi ornare sodales. Nam ut mattis orci. Mauris in dolor purus, laoreet semper quam. Nunc sit amet nibh at metus pretium dictum.<p></p>Fusce non orci metus. Nunc eget sem ullamcorper velit tincidunt iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet risus justo, at pharetra quam. Curabitur convallis viverra est et interdum. Suspendisse quis quam sed orci lobortis venenatis. Pellentesque auctor aliquam nunc, ut euismod velit ultrices at. Sed in molestie nisi. Vivamus elementum erat ut nulla egestas porttitor. Curabitur consequat dictum pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac orci eros, nec posuere mauris. Pellentesque sit amet arcu sit amet elit sollicitudin condimentum ac in nisl. Cras vitae leo sed risus pharetra luctus in vel lacus. Phasellus varius adipiscing tortor non auctor. Morbi ut sem libero, vel tristique est. Aliquam erat volutpat. Etiam nec risus eget magna mattis elementum.";
 
    $ID_001_short = substr($ID_001,0,300);
?>
 
<span id="content_short_ID_001"><? echo("$ID_001_short"); ?></span><span id="content_full_ID_001" style="display: none;"><? echo("$ID_001"); ?></span>
 
<div class="portal_more_less" id="toggle" name="ID_001"> <span id="more_ID_001">[ <a href="#">Show More</a> ]</span><span id="less_ID_001" style="display: none;">[ <a href="#">Show Less</a> ]</span></div>
2

Wow, I didn’t even catch onto the fact I already had a class written in there and was trying to add to of the same attributes, how clumsy of me! :blush: (maybe I need to get off the computer for a couple hours :lol:)

Works fine now! :slight_smile:

Thank you for your help Scallio, can’t believe how close I was, but fell at the last hurdle! Cheers for helping me!

3

You’re welcome :slight_smile:

4

If an element has more than one class you need to put those together in class= separated by a space, so instead of


<div class="[COLOR="Red"]portal_more_less[/COLOR]" class="[COLOR="RoyalBlue"]toggle[/COLOR]" name="ID_002">

you need to do this


<div class="[COLOR="Red"]portal_more_less[/COLOR] [COLOR="RoyalBlue"]toggle[/COLOR]" name="ID_002">

:slight_smile:

5

Ahh, that makes perfect sense!! - I wasn’t aware you could use classes with jQuery so easily, I thought it run from id attributes, hence all the #'s

Although, I just changed it and it’s still not working. Maybe I’ve read your reply incorrectly, it’s usually my end that I’m screwing up on when I get a reply to a question :stuck_out_tongue:

But…

<script src="includes/js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
 
////////////////////
// Show/Hide Text //
////////////////////
                
$('.toggle').each( function() {
var id = $(this).attr("name");
        
$("#more_" + id + "").click(function(event){
                                
	$("#content_short_" + id + "").slideUp("fast");
                    
	$("#content_short_" + id + "").queue(function () {
        $("#content_full_" + id + "").slideDown("slow");
        $("#content_full_" + id + "").dequeue();
    });
                    
	$("#more_" + id + "").hide();
    $("#less_" + id + "").fadeIn("slow");
});
            
$("#less_" + id + "").click(function(event){
                                                        
    $("#content_full_" + id + "").slideUp("slow");
                    
    $("#content_full_" + id + "").queue(function () {
        $("#content_short_" + id + "").slideDown("fast");
        $("#content_short_" + id + "").dequeue();
    });
                    
    $("#less_" + id + "").hide();
    $("#more_" + id + "").fadeIn("slow");
});

});
     
});
</script>
<body>
<?
    $ID_001 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum nisi urna, id tempus diam. Integer dignissim mauris ut orci suscipit gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sapien leo, sollicitudin ac fermentum et, suscipit eu mi. Vestibulum et sapien vel mi auctor facilisis. Curabitur interdum, elit nec semper vehicula, eros dolor rutrum arcu, a faucibus dolor tellus at dui. Vestibulum aliquam tellus a mi ornare sodales. Nam ut mattis orci. Mauris in dolor purus, laoreet semper quam. Nunc sit amet nibh at metus pretium dictum.<p></p>Fusce non orci metus. Nunc eget sem ullamcorper velit tincidunt iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet risus justo, at pharetra quam. Curabitur convallis viverra est et interdum. Suspendisse quis quam sed orci lobortis venenatis. Pellentesque auctor aliquam nunc, ut euismod velit ultrices at. Sed in molestie nisi. Vivamus elementum erat ut nulla egestas porttitor. Curabitur consequat dictum pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac orci eros, nec posuere mauris. Pellentesque sit amet arcu sit amet elit sollicitudin condimentum ac in nisl. Cras vitae leo sed risus pharetra luctus in vel lacus. Phasellus varius adipiscing tortor non auctor. Morbi ut sem libero, vel tristique est. Aliquam erat volutpat. Etiam nec risus eget magna mattis elementum.";
 
    $ID_001_short = substr($ID_001,0,300);
?>
<span id="content_short_ID_001"><? echo("$ID_001_short"); ?></span><span id="content_full_ID_001" style="display: none;"><? echo("$ID_001"); ?></span>
<div class="portal_more_less" class="toggle" name="ID_001">
<span id="more_ID_001">[ <a href="#">Show More</a> ]</span><span id="less_ID_001" style="display: none;">[ <a href="#">Show Less</a> ]</span>
</div>
<hr />
<?
    $ID_002 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum nisi urna, id tempus diam. Integer dignissim mauris ut orci suscipit gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sapien leo, sollicitudin ac fermentum et, suscipit eu mi. Vestibulum et sapien vel mi auctor facilisis. Curabitur interdum, elit nec semper vehicula, eros dolor rutrum arcu, a faucibus dolor tellus at dui. Vestibulum aliquam tellus a mi ornare sodales. Nam ut mattis orci. Mauris in dolor purus, laoreet semper quam. Nunc sit amet nibh at metus pretium dictum.<p></p>Fusce non orci metus. Nunc eget sem ullamcorper velit tincidunt iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet risus justo, at pharetra quam. Curabitur convallis viverra est et interdum. Suspendisse quis quam sed orci lobortis venenatis. Pellentesque auctor aliquam nunc, ut euismod velit ultrices at. Sed in molestie nisi. Vivamus elementum erat ut nulla egestas porttitor. Curabitur consequat dictum pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac orci eros, nec posuere mauris. Pellentesque sit amet arcu sit amet elit sollicitudin condimentum ac in nisl. Cras vitae leo sed risus pharetra luctus in vel lacus. Phasellus varius adipiscing tortor non auctor. Morbi ut sem libero, vel tristique est. Aliquam erat volutpat. Etiam nec risus eget magna mattis elementum.";
 
    $ID_002_short = substr($ID_002,0,300);
?>
<span id="content_short_ID_002"><? echo("$ID_002_short"); ?></span><span id="content_full_ID_002" style="display: none;"><? echo("$ID_002"); ?></span>
<div class="portal_more_less" class="toggle" name="ID_002">
<span id="more_ID_002">[ <a href="#">Show More</a> ]</span><span id="less_ID_002" style="display: none;">[ <a href="#">Show Less</a> ]</span>
</div>

That’s adding the each part of the jQuery and changing the id to class, any ideas?

6

Aaah, you were so close! :slight_smile:

The trick is not to use id’s, because they cannot occur more than one a page. Period.

So, what else is there? Indeed, classes :slight_smile:

Let’s try that:


<span id="content_short_ID_001"><? echo("$ID_001_short"); ?></span><span id="content_full_ID_001" style="display: none;"><? echo("$ID_001"); ?></span>
 
<div class="portal_more_less" [COLOR="Blue"]class[/COLOR]="toggle" name="ID_001"> <span id="more_ID_001">[ <a href="#">Show More</a> ]</span><span id="less_ID_001" style="display: none;">[ <a href="#">Show Less</a> ]</span></div>

Alright, so the problem now is that you want to attach your code to each element that has class toggle. To each element, each, each… wait… doesn’t jQuery have a function called each? :wink:


$(document).ready(function() {
 
////////////////////
// Show/Hide Text //
////////////////////
                
$('.toggle').each( function() {
var id = $(this).attr("name");
        
$("#more_" + id + "").click(function(event){
                                
    $("#content_short_" + id + "").slideUp("fast");
                    
    $("#content_short_" + id + "").queue(function () {
        $("#content_full_" + id + "").slideDown("slow");
        $("#content_full_" + id + "").dequeue();
    });
                    
       $("#more_" + id + "").hide();
    $("#less_" + id + "").fadeIn("slow");
});
            
$("#less_" + id + "").click(function(event){
                                                        
    $("#content_full_" + id + "").slideUp("slow");
                    
    $("#content_full_" + id + "").queue(function () {
        $("#content_short_" + id + "").slideDown("fast");
        $("#content_short_" + id + "").dequeue();
    });
                    
    $("#less_" + id + "").hide();
    $("#more_" + id + "").fadeIn("slow");
});
});
     
});

voila :slight_smile: