css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
user profile image

Bootstrap 3 collapse redesigned to match Material Design concept with ability to add icons on show/hide with smooth transition by adding an active class to the panel heading on show/hide.

Comments

  1. Hi Shehab,

    I'm trying to design something similar to your pen, but my panel icon is not transitioning with the animation of rotate. I'm new to design world, and when I am trying to debug in chrome, the show.bs.collapse event itself is not being raised, can you please give me some pointer?

  2. Hi Kiran,

    I would like to help you if you showed me your code. But I don't think you want to debug an event, you definitely want to inspect an element to check what is happening when that event fires. And what is happen when show.bs.collapse firing is adding an .active class to the .panel-heading which is containing the icon you want to rotate.

  3. @shehab-eltawel This was actually nice.. But, when i click on the panel heading, the plus(+) icon is not getting changed to (-). It remains as same. i've added all the libraries which are mentioned in codepen settings icon....

    Any idea why cuz i cannot figure it out....

  4. Hi Shehab, I tried to implement your code on my webpage. But when I resize my webpage it disappears. I tried all my options so that it doesn't disappears but invain. Can you help me with it?

  5. It doesn't work for me body { margin: 0; font-family: 'Roboto'; font-size: 14px; background: #455A64; }

    h3 { color: #fff; font-size: 24px; text-align: center; margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; margin-bottom: 30px; font-weight: 300; }

    .container { max-width: 970px; }

    div[class*='col-'] { padding: 0 30px; }

    .wrap { box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); border-radius: 4px; }

    a:focus, a:hover, a:active { outline: 0; text-decoration: none; }

    .panel { border-width: 0 0 1px 0; border-style: solid; border-color: #fff; background: none; box-shadow: none; }

    .panel:last-child { border-bottom: none; }

    .panel-group > .panel:first-child .panel-heading { border-radius: 4px 4px 0 0; }

    .panel-group .panel { border-radius: 0; }

    .panel-group .panel + .panel { margin-top: 0; }

    .panel-heading { background-color: #009688; border-radius: 0; border: none; color: #fff; padding: 0; }

    .panel-title a { display: block; color: #fff; padding: 15px; position: relative; font-size: 16px; font-weight: 400; }

    .panel-body { background: #fff; }

    .panel:last-child .panel-body { border-radius: 0 0 4px 4px; }

    .panel:last-child .panel-heading { border-radius: 0 0 4px 4px; transition: border-radius 0.3s linear 0.2s; }

    .panel:last-child .panel-heading.active { border-radius: 0; transition: border-radius linear 0s; } /* #bs-collapse icon scale option */

    .panel-heading a:before { content: '\e146'; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; font-size: 24px; transition: all 0.5s; transform: scale(1); }

    .panel-heading.active a:before { content: ' '; transition: all 0.5s; transform: scale(0); }

    bs-collapse .panel-heading a:after {

    content: ' '; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; transform: scale(0); transition: all 0.5s; }

    bs-collapse .panel-heading.active a:after {

    content: '\e909'; transform: scale(1); transition: all 0.5s; } /* #accordion rotate icon option */

    accordion .panel-heading a:before {

    content: '\e316'; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; transform: rotate(180deg); transition: all 0.5s; }

    accordion .panel-heading.active a:before {

    transform: rotate(0deg); transition: all 0.5s; }

    Default collapse with scaling icon

    Where now are the horse and the rider? Where is the horn that was blowing? Where is the helm and the hauberk, and the bright hair flowing?
    Where is the harp on the harpstring, and the red fire glowing? Where is the spring and the harvest and the tall corn growing?
    The days have gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning?
    They have passed like rain on the mountain, like a wind in the meadow; The days have gone down in the West behind the hills into shadow.

    Accordion collapse with rotating icon

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

    $(document).ready(function() { $('.collapse.in').prev('.panel-heading').addClass('active'); $('#accordion, #bs-collapse') .on('show.bs.collapse', function(a) { $(a.target).prev('.panel-heading').addClass('active'); }) .on('hide.bs.collapse', function(a) { $(a.target).prev('.panel-heading').removeClass('active'); }); });

    The js code invalid

  6. Hey there! Just curious - how might I go about adding a class in the CSS to negate the bootstrap accordion effect so that multiple tabs can be opened at once? I just wanted to fiddle around with it. The code I have is working flawlessly at the moment, so I'd rather avoid re-styling everything without the bootstrap. Thanks Shehab!

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

You must be logged in to comment.
Loading...
Loading...