javascript - I have react tabs code working perfectly but I need to change the html structure -
i have react tabs code working need change html structure match below one. possible bring tab content after <a>
tag maintain html structure?
https://jsfiddle.net/9e767txs/9/
<div classname="sports-tab-container"> <ul> <li role="presentation" classname="sports-setup-ico first-time-active ft-active-tab"> <a href="javascript:;" classname="sports-tab-header"> <h2>sports player</h2> <p classname="sports-subtitle">days 1 , 2</p> </a> <div classname="sports-tab-content"> <p classname="sports-large-text ft-day1 ft-day2">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry</p> </div> </li> <li role="presentation" classname="sports-invest-ico"> <a href="javascript:;" classname="sports-tab-header"> <h2>car selling</h2> <p classname="sports-subtitle">approx. day 3</p> </a> <div classname="sports-tab-content"> <p classname="sports-large-text ft-day1 ft-day2">it long established fact reader distracted readable content of page when </p> </div> </li> </ul> </div>
just change small css style:
make: display: block inline-block
.tabs__labels li { display: inline-block; }
Comments
Post a Comment