CODEWITHSUNDEEP
jqueryhtmlcsscss-float
George Grigorita
George Grigorita

Reputation: 1900

slideToggle with floating items

Not the best title but I had no idea how to describe my problem in a few words. I have six floating items, each with a description. I'm using slideToggle to hide and show the description of each item. The problem is that the description div is wider (100%) than the item it corresponds to (30%) and I need to show this description between the six items (there are 3 on a row). Now, every time I show a description the floating items are... well, not floating anymore because of the wider div.

I tried to use position: absolute; on the description div, but then the rest of the floating items covered the description.

It's a lot of code (mostly text) so I made a fiddle here. This might not be the best solution to get to the result I want, so any idea on how to solve or re-code this would be helpful.

In case my explanation or the fiddle is not clear enough I also have a screenshot of the design I'm trying to code:

enter image description here

Upvotes: 0

Views: 197

Answers (1)

myfunkyside
myfunkyside

Reputation: 3950

I updated your fiddle: http://jsfiddle.net/Sd29U/

Your problems happened because you put the container-text after each individual container-services dev.

I first put three buttons in a row, and after that the three corresponding texts.
JavaScript checks which button is pressed and handles accordingly.
(HTML, JavaScript and CSS are all changed)


EDIT: http://jsfiddle.net/n5LjJ/

All the container-services now start with the class "default", which gets switched to "active" when you click on it.
In the CSS, I created two sub-classes, each with their own background-color and border-color. You can of course change those and add whatever style-rules you like.

I removed the activeButton-var, and check for the active-class instead.

The only possible downside of that, is that you have to put in this line:
$('.container-services').removeClass('active').addClass('default');, which checks every container-services-element for the active-class. If you would store the classname of the active button in the activeButton-var, you would only have to change the active-class of that one element back to "default".
You won't notice it, but strictly speaking, more code needs to be executed now, which is of course less optimal..

Upvotes: 2

Related Questions