I have a table whose rows are declared as accordion and each row has their own sub row. So the situation is if you click a row then it will expand and its sub-row content will be displayed. If you click on other row the accordion will show the current row's sub-row and toggle other row. These works fine.
I want that if you click a row then that row will become active and its sub-row will display and other rows will collapse and at the same time opacity of all other accordion rows must become 0.33 so that the only active row is in focus. This happens for the first time smoothly as desired. Now one row is active and its content is displayed and others are blurred. Now if I want to click other rows I must give a hover effect on other rows so that those blurred ones(0.33) are visible on hover. So this also works fine. Now the problem starts here: If I click any other row then its sub-rows will become visible and others will be blurred, the weird thing is that active row(accordion) also becomes like other row(blurred). I mean only the sub-row of the accordion gets the opacity of 1 rather than accordion+sub-row becoming blurred(which is desired).
There is also one more problem with border-top of first cell in first row on hover. Don't know why it is applying its own border.
I have wasted whole day but still these are giving me headache.
The problem starts only after first iteration. I guess some problem with my jquery code. You can see it live in this jsfiddle (I guess whatever I wrote may not be clear to everyone :P so see it live here ) http://jsfiddle.net/alok108/EfeTN/35/
<table class="table list" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody class="">
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
</table>
Java Script :
<script>
$(function() {
var $list = $('.list');
$list.find("tr").not('.accordion').hide();
$list.find("tr").eq(0).show();
$list.find(".accordion").click(function(){
$(this).fadeTo("fast", 1) ;
$list.find('.accordion').not(this).siblings().fadeOut(500);
$(this).siblings().fadeToggle(500);
$(this).addClass('active');
$list.find('.accordion').not(this).removeClass('active');
$list.find('.accordion').not(this).css("opacity", 0.33);
$list.find('.accordion').not(this).hover(function(){
$(this).fadeTo("fast", 1);},
function(){$(this).fadeTo("fast", 0.33);
});
});
});
</script>
CSS:
#table tbody .accordion:hover td:first-child,
#applicantTable tbody .accordion.active td:first-child{
border-left:3px solid #000; border-top:none; float:left;
overflow: hidden; padding-left: 5px; width:100%;
}
#table tbody tr td{
background-color:#ccc;
}