CODEWITHSUNDEEP
javascriptjquerycsstabs
Sowmya
Sowmya

Reputation: 26989

Css arrow to content tab box

I have a easy responsive content tab. I want to add css arrow to the content box which should point towards the respective menu item.

How do I get it dynamically for each tab content boxes.

Here is my code

$(document).ready(function () {
    $('#verticalTab').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true
    });
});

DEMO

Upvotes: 0

Views: 721

Answers (1)

myajouri
myajouri

Reputation: 3124

Add position: relative; to .resp-vtabs .resp-tabs-list li then add the following CSS:

.resp-vtabs .resp-tabs-list li.resp-tab-active:after {
   content: ""; 
   display: block;
   width: 0;
   height: 0;
   position: absolute;
   right: -5%;
   top: 0;
   border: 10px solid transparent;
   border-right-color: red;
}

You can change the border-right-color to change the color of the arrow.

http://jsbin.com/odAkAXI/4/

Upvotes: 2

Related Questions