Edit Question - KnowledgeHub

Title Body

I've got this vertical slideshow navigable by up/down arrows. there's 7 items (divs) inside the slideshow's container div but only 3 of them are visible at a time. In truth, this slideshow is a menu - from the 3 items visible, the one in the middle is the one clickable, which will load content in a div somewhere else in the page. Now, since there are 3 items and only the 2nd item (middle one) is clickable, I need to create a difference between them. So, I thought of changing the items border/border-radius like this: The problem is that I don't have a clue on how to do that since the divs are constantly changing place in the visible area. I really need help here. HTML markup: <div id="rocksType_btns"> <div id="rocksType_btnUp"></div> <div id="rocksType_btnDown"></div> </div> <div id="rocksType_subtypeSlider"> <div id="rocksType_DBitems_container"> <div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div> <div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div> <div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div> <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div> <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div> <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div> <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div> </div> </div>  I already have the CSS code defined for the before/current/after states - just need to assign them. Here's a Fiddle . Thanx. Pedro

Tags (comma-separated) Cancel