Full width accordion site

Question

i was wondering if anyone can help me figure out what kind of technical requirements or if anyone have any examples on how to make a website like this: Full width accordion I am trying to make a portfolio site, that looks somewhat like this. Any input is appreciated

Thanks!

I'm starting to believe that this stackoverflow is filled with tons of programmer snobs. Sorry if my questions are basics, i'm a designer not a coder. I wouldn't ask if i don't have to. How is this off topic? did i asked you for a dating advice or something? This is stupid, instead of taking the time to close the question why not answer it if it's so simple for you guys. — Andreas Michael, Apr 28 '16 at 07:51

Mogzol · Accepted Answer · 2016-04-15T05:00:04.477

The accordion effect can be achieved though just hiding and showing elements.

For example, you could use jQuery and slideToggle on the clicked accordion element, and then slideUp on all the other accordion elements to achieve a pretty simple and nice effect. Add in some css or javascript to size it to the height of your screen and then use javascript scroll to it and you're pretty much done.

Also note that that site uses ajax to load stuff dynamically, instead of having it all on one page. This greatly reduces the size of the site, and can help speed up the initial load, at the cost of having to load each accordion pane as you open them.

Here's a really basic example I threw together. It doesn't do ajax loading, but it gives you the accordion effect: https://jsfiddle.net/uw9gaep2/

HTML for one of the panes (you'll want to set the content div to display:none via css or a style tag):

<div class="pane">
  <div class="title">
    Thing 1
  </div>
  <div class="content">
    blahblah
  </div>
</div>

jQuery:

$('.title').on('click', function() {
  // Save the content and title to vars
  var $title = $(this);
  var $content = $title.next('.content');

  // Slide toggle the one we want
  $content.slideToggle('fast', function() {
    // Once it's done scroll to the title (http://stackoverflow.com/a/6677069/1687909)
    $('html, body').animate({
      scrollTop: $title.offset().top
    }, 200);
  });

  // Slide up all the other ones
  $('.content').not($content).slideUp('fast');
});

score 0 · Answer 2 · answered Apr 15 '16 at 07:00

I've made a demo demonstrating how you can achieve something similar with bootstrap, some javascript, and a little CSS:

jsfiddle demo

$('a[data-toggle="collapse"]').on('click', function () {
    var $target,
        offset;

    if ($(this).closest('.panel').prev().find('.panel-collapse').hasClass('in')) {
        $target = $(this).closest('.panel').prev().find('a[data-toggle="collapse"]');
        offset = 0;
    } else {
        $target = $(this);
        offset = 36;
    }

    $('html, body').animate({
        scrollTop: $target.position().top - offset
    });
});

CSS (by habit it's Sass/SCSS):

.panel-group {
  margin-bottom: 0;

  .panel {
    border-radius: 0;

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

    &-body {
      height: calc(100vh - 90px);
    }
  }
}

.panel-default {
  & > .panel-heading {
    height: 36px;
  }
}

.jumbotron {
  //background-image: url(http://lorempixel.com/800/600);
  background-color: #333;
  background-position: center center;
  background-size: cover;
  margin-bottom: 0;
  height: 100vh;
}

What stood out to me about the website you linked was not its full-width nature, which is easy to accomplish, but rather its full-height nature which is a little trickier to. Note my use of calc() and vh in the CSS to achieve the effect. It's not quite there yet (issue when resizing the window up/down) but as a starting point it could work.

Full width accordion site

2 Answers2