cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image


  1. I think your slide is pretty slick. Well done. Just curious why you didn't just display:none the radio inputs? Why hide them with z-index:-1 instead?

  2. I tried to implement this method into my site but came across one major drawback. Because the content is absolutely positioned I can't have it in between page content as the parent doesn't know the height/space to take up, so if the content is dynamic in height you get it covering content that comes after the tabbed component. I can't figure out a way to fix this with this method. I might have to explore a different method for CSS tabs, which is a shame seeing as I really like the active tab animation effect. If you have any ideas on how to solve this though, by all means I would welcome a response!

  3. Solved. Tweaked the CSS a bit and change HTML markup to the following, so the content can be positioned relative. Only downside is I'm now just using display block and none to show/hide the content, so you lose the nice fading opacity effect on the content when it's positioned absolutely. But a small loss to achieve a method that doesn't break the page flow:

    Excuse the angular, but this is how I'm running with it currently:

    <div class="tabsComponent">
        <div class="tabsComponent__tabs">
            <input ng-repeat-start="i in [5,4,3,2,1,0]" type="radio" name="tabs" id="tabItem{{i}}" class="tabsComponent__control" ng-class="{'tabsComponent__control--selected':rvs.isSet(i)}" ng-checked="rvs.isSet(i)">
            <label class="tabsComponent__label" tabindex="" for="tabItem{{i}}" ng-click="rvs.setTab(i)" ng-class="{'tabsComponent__label--inactive': !rvs.hasRatings(i)}" ng-if="i > 0">Rated {{i}}</label>
            <label ng-repeat-end="" class="tabsComponent__label" for="{{i}}" ng-click="rvs.setTab(i)" ng-class="{'tabsComponent__label--inactive': !rvs.hasRatings(i)}" ng-if="i == 0">ALL</label>
            <div class="tabsComponent__highlight"></div>
        <div class="tabsComponent__content" ng-class="{'tabsComponent__content--selected':rvs.isSet(i)}" ng-repeat="i in [5,4,3,2,1,0]">
            <div review-item="rating" ng-repeat="rating in rvs.ratingsArray[i] | orderBy:[rvs.commentsFirst,'-CreatedDate'] | limitTo: rvs.showingCount[i]"></div>
            <a ng-show="rvs.showingCount[i] < rvs.ratingsArray[i].length" ng-click="rvs.showMore(i)" class="buttonSecondary buttonSecondary--inverted">Show more reviews</a>
  4. @BenMildren What You think about ? I rewrite Your code to use :target pseudoselector https://jsfiddle.net/mrGrochowski/0e8447yn/

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.