(please forgive my ignorance I'm not a coder)
Here's my codepen
I'm having trouble with a table of items, where I want to hide a div with the descriptions, unless user clicks on the row for the specific item.
So I almost got it working as I want, using class="collapse" - but the animation is not smooth.
Then I tried using class="accordion-toggle"- now it's smooth but 1. I don't want to have it as accordion (I want the user to be able to expand all descriptions)- even though it doesn't behave like one, 2. it is revealing some portion the row below, which I want to hide when the row is collapsed.
note: I modified default bootstrap table as I wanted higher rows without border, by:
td {
height:50px;
border:none!important;
vertical-align:middle!important;
}
Additional Question: I also want to have the table striped, but my descriptions break it because they are in every other row (how to prevent that?)
Here's what I want to achieve:
