Forums

Advanced Search

Push down footer or other blocks when opening accordion

Permalink
I have a isotope-masonry setup with 10 responsive areas. In each area is a Content Block and a «pure_accordion". If accordion is opened, content dissappears underneath the footer or under the block underneath. I does not push down the footer. What could be wrong?

If I use normal bootstrap coded areas or embedded layouts, accordions expand nicely and push the footer or other blocks down.
Is the problem in the concrete 5 accordion or the masonry script? 

<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
  columnWidth: '.grid-sizer'},
  });
   $grid.imagesLoaded().progress( function() {$grid.isotope('layout');});
});
</script>


Using the class .collapse helps but block are alined wrong.

Any hints?

Thanks in advance
Stef
View Replies: View Best Answer
hutman replied on at Permalink Reply
hutman
Without being able to see the site, I am guessing that these are floating or absolute positioned and the parent isn't the appropriate height to contain them when the size changes. You either need to clear the floats or set a height on the parent to make sure it's tall enough to push the rest of the content down.
designbureau replied on at Permalink Reply
hutman, Thank you for your expertise.
Page is at:http://www.blink-design.ch/apo/index.php/test/testen-impfen-masonry...
which is a stage server of the agency I work for. I managed to get the footer and other block to push down with a script I found from the creator of Isotope, David Desandro.
This script I added in the footer works fine, but unfortunately, when opening an accordion it closes any other open accordion. There's no way of opening all accordions to stay open. I guess I have to experiment a little to have the desired effect.

Maybe it's just a small thing in the scipt, but since I'm weak in JS I'd be happy to get some hints.

<script>
var $grid = $('.grid');
$grid.on( 'click', '.header', function( event ) {
  var $title = $( event.currentTarget );
  var $gridItem = $title.parents('.grid-item');
  var isOpen = $gridItem.hasClass('open');
  $grid.find('.open').removeClass('open')
    .find('.content').slideUp( 'fast', layoutIsotope );
  if ( !isOpen ) {
    $gridItem.addClass('open')
      .find('.content').slideDown( 'fast', layoutIsotope );
  }
});
function layoutIsotope() {
  $grid.isotope('layout');
Viewing 15 lines of 17 lines. View entire code block.


Thanks
Stef
hutman replied on at Permalink Reply
hutman
I think you need to update it to this

<script>
var $grid = $('.grid');
$grid.on( 'click', '.header', function( event ) {
  var $title = $( event.currentTarget );
  var $gridItem = $title.parents('.grid-item');
  var isOpen = $gridItem.hasClass('open');
  if ( !isOpen ) {
    $gridItem.addClass('open')
      .find('.content').slideDown( 'fast', layoutIsotope );
  } else {
    $gridItem.removeClass('open')
      .find('.content').slideUp( 'fast', layoutIsotope );
  }
});
function layoutIsotope() {
Viewing 15 lines of 18 lines. View entire code block.


That way if the accordion is triggered and it's not yet open it will be opened, and if it's triggered and it is already opened it will be closed, but the rest of the accordion items won't be affected either way.
designbureau replied on at Permalink Reply
Thanks again for the fix. That looks much better. Although it needs 2 clicks to open an accordion for the first time. When all accordions are open and you try closing one, it opens/closes another one. I tried with the class collapse-toggle and it got even messier.
I try to inlude it in the JS of the accordion to see.
Regards from Zurich, 28°F
hutman replied on at Permalink Reply
hutman
If you adjust it to this it should take care of those issues

<script>
var $grid = $('.grid');
$grid.on( 'click', '.header', function( event ) {
  event.preventDefault();
  event.stopPropagation();
  var $title = $( event.currentTarget );
  var $gridItem = $title.closest('.grid-item');
  var isOpen = $gridItem.hasClass('open');
  if ( !isOpen ) {
    $gridItem.addClass('open')
      .find('.content').slideDown( 'fast', layoutIsotope );
  } else {
    $gridItem.removeClass('open')
      .find('.content').slideUp( 'fast', layoutIsotope );
  }
Viewing 15 lines of 20 lines. View entire code block.
designbureau replied on at Permalink Reply
Thank for sending your code.
This time, on first click, it opens accordion wihich dissapears und block underneath. On second click it opens properly and moves to availabe space.
In an older Edge browser it won't open at all (not to worry about-it's just info). The live site at apothekeschaffhauserplatz.ch works now without isotope since there are only three boxes.
hutman replied on at Permalink Best Answer Reply
hutman
If I were a guessing person I would say that the problem is something to do with you assigning $grid multiple times to different things, but without being able to actually troubleshoot on the page, I can't say for sure.
designbureau replied on at Permalink Reply
I think you're right. It needs script debugging. I guess I have to check with client first.
If I have the working code, I will publish it here.
Thank you again for helping.
Stef