Question

I am trying to do some article list, where you can select them using checkbox.
In case you are not sure to select or not, there’s option to click on header, and get more information about the article.

I have used this example. So where’s the problem ? I don’t want to expand articles that I select, just those where I click on header.

JQ script part is OK, because it works fine, it expands / collapses correctly, problem is or in CSS or in HTML, where to place checkbox to see it in header.

I have sample HTML:

     <div class="art_list">
     <div class="art_head"><div class="art-chk"><input type="checkbox"  name="reguser"  value="Deki" /></div>Artilk-1 </div>
     <div class="art_body">Artikl 1 ima sve</div>
     </div>

And this gives me checkbox in the header, but when I check it, it expands the article.

I have tried this also:

     <div class="art_list">
     <input type="checkbox"  class="art-chk" name="reguser" value="Deki" />
     <p class="art_head">Artikl-2 </p>  
 <div class="art_body">Artikl 2 ima sve</div>
     </div>

It hides checkbox in the header, and no matter that I’ve tried putting z-index for art-list, art-head, lower then art-check, I can’t see it.

Here is JS:

    function hideShowArticles(){
$(document).ready(function()
{
    //hide the all of the element with class msg_body
    $(".art_body").hide();
    //toggle the componenet with class msg_body
    $(".art_head").click(function()
    {
        $(this).next(".art_body").slideToggle(600);
    });
  });
}

So what am I missing ?

I need:
[X] Header

and that only click on “header” expands the article, click on checkbox, selects the article without expanding it. Click on header expands the article below checkbox and header, that remain above whole description.

Answer 1

Is this right?

http://jsfiddle.net/chrismackie/S3rWC/