I have a table whose rows are declared as an accordion, and each row has its own substring. Thus, the situation is that if you click on a string, it will expand and the contents of the substring will be displayed. If you click on another string, the accordion will show the current string of the string and switch another string. It works great.
I want this line to become active by clicking on a string and its substring to be displayed and other strings to crash, while at the same time the opacity of all other strings of the accordion should become 0.33, so that the only active string is in focus. This happens for the first time smoothly at will. Now one line is active and its contents are displayed, while others are blurred. Now, if I want to click other lines, I have to put some freezes on the other lines so that these blurry (0.33) are visible on hover. So this also works great. Now the problem begins here: If I press any other string, its substrings will become visible and others will be blurred, it is strange that the active string (accordion) also becomes similar to another string (blur). I mean that only the substring of the accordion gets an opacity of 1, and not the harmonic + substring, which becomes blurred (which is desirable).
There is another problem with the top edge of the first cell in the first row on hover. I don’t know why he applies his own border.
I spent all day, but still it gives me a headache.
The problem begins only after the first iteration. I think some problems with my jquery code. You can see this in this jsfiddle (I think everything I wrote may not be clear to everyone: P, so see Him 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; }