Login

10-14-2008, 05:51 AM

[eluser]treadsoftley[/eluser]
First dabbles with jquery and I wanted to have a news listing page with multiple show/hide the news body. I found this (@ :http://ok-cool.com/posts/read/17-jquery-for-designers-part-2/)

Code:
<scr+ipt> //&lt;![CDATA[  

// When the page is ready  

$(document).ready(function(){  

$(".article .thebody").hide();  

$("#container .article ul")  

.prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>");  

$(".actions li.readbody a").click(function(event){  

$(this).parents("ul").prev(".thebody").toggle();  

// Stop the link click from doing its normal thing  

return false;  

});  

});  

//]]></scr+ipt>

And it worked just fine. But I wanted to toggle 'read' to 'hide' once it was clicked etc.
so I added this:

Code:
<scr+ipt> //&lt;![CDATA[  

// When the page is ready  

$(document).ready(function(){  

$(".article .thebody").hide();  

var readMe="read";

var hideMe="hide";

$("#container .article ul")  

.prepend("<li class='readbody'><a href='' title='Read the article' id='readHide'>"+readMe+"</a></li>");  

$(".actions li.readbody a").click(function(event){  

$(this).parents("ul").prev(".thebody").toggle();  

if ($('a#readHide').text()==readMe) {

$('a#readHide').text(hideMe);

}

else {

$('a#readHide').text(readMe);

}

// Stop the link click from doing its normal thing  

return false;  

});  

});  

//]]></scr+ipt>

But of course this changed every 'read' on the page to 'hide' not just on the specific item. How can I make this item/record specific?

10-14-2008, 06:27 AM

[eluser]xwero[/eluser]
I don't know how your dom is structured but a simple toggle look like this

Code:
&lt;html&gt;

&lt;head&gt;

&lt;!-- add jquery file here --&gt;

&lt;script>

$(function()

{

   // hide all elements that are not the title

   $('.article').children().not('h2').hide(); 

   // toggle

   $('.article h2').toggle(

     function() // odd clicks

     {

        $('.article').children().not('h2').hide(); // hide all elements that could be open

        $(this).parent().children().not('h2').show();

     },

     function() // even clicks

     {

       $('.article').children().not('h2').hide(); // hide all elements that can be open

       // because it hides all elements on the page it also hides the elements from the specific article

     }

   );

});

&lt;/script>

&lt;/head&gt;

&lt;body&gt;

<div class="article">

<h2>title</h2>

<p>content</p>

</div>

&lt;/body&gt;

It's not optimized code but you can improve it if you want Wink

Avoid adding html as much as possible. If you can get it to work with only the design html keep it that way.

10-14-2008, 08:59 AM

[eluser]treadsoftley[/eluser]
Thanks xwero it was your use of 'children' that was the clue as to how to change things to fit my dom. My version ain't very clean but it works ... but no doubt I will clean it up in the future as I learn more.

And just for the record, your posts throughout this forum have been soooo helpful to me. So many many thanks for these and this one in particular.

10-14-2008, 09:14 AM

[eluser]xwero[/eluser]
Keep that in mind when i'm out of work whenever it may happen Wink