[SOLVED] Close accordion from content bottom?

Questions
1

Im using an accordion and I load a couple of images in it and below the last image I have a button that closes the accordion. And that works.

But when you close the accordion from the button you opened it with, then it closes and keep the accordion on the same place on the page, no jumping or so. Good.

But when you close it from the button underneath I need to calculate where it is and then animate the page to that position so it does´t jump. And this is working, but is there a better way Vladimir, like you do it?

<div class="accordion-item">
        <div id="allabilder" class="accordion-item-toggle allabilder">ALL IMAGES</div>
        <div class="accordion-item-content">
       
      <img src="image1.jpg"/>
     <img src="image1.jpg"/>
     <img src="image1.jpg"/>   
      
      <i class="f7-icons close-allabilder">close</i>
      
        </div>
    </div>

And my js…

     allabilder = $('#allabilder'); //get where the accordion is from the top when the page loads...
 	 alla_position = $(allabilder).offset();
	
	console.log(alla_position.top)

var jump = $('.close-allabilder');
var new_position = $(jump).offset();
	//console.log(new_position.top)
	var hej =(alla_position.top-new_position.top)
	//console.log('hej'+hej)
	//$('.page-content').scrollTop(hej)
	app.accordion.close('.accordion-item');
	setTimeout(function() { 
    $('.shop2').animate({
        scrollTop: hej
   }, 200);
  },0);

And this works, but maybe there is a better way?
Any input appreciated, thanks!

2

if your meaning is close one accordion,just add

<div class="accordion-item">
        <div id="allabilder" class="accordion-item-toggle allabilder">ALL IMAGES</div>
        <div class="accordion-item-content">
       
      <img src="image1.jpg"/>
     <img src="image1.jpg"/>
     <img src="image1.jpg"/>   
      
      <a href="#" class="item-link"><i class="f7-icons close-allabilder">close</i></a>
        </div>
    </div>
3

Hi hongfu
The problem is not closing the accordion.

The problem is that when you close the accordion from the link you open it from, then it animates up when it closes and the close link is in the same position on the page all the time.

But when you scroll down in the accordion and then close it with the below link, then it jumps in the page.
So basically I would l it to work like when you close the accordion from the top link, that it animate the content up, but reverse, so when you close it with the below link, it would animate down when it closed the accordion instead.

I hope you understand what I mean :wink:

4

i’m confusing~~~

your mean: that folding button was out of accordion？and you want animated it as inside last accordion?

5

i think i catch you

you can add a bottom-link links hash on the top open-link,then runs accordion.close

6

Not sure how you mean?

7

best solution: Just put the button under the content.

<li class="accordion-item">
  <div class="accordion-item-content">
    <div class="block">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
      </p>
    </div>
  </div>
  <a href="#" class="item-link">
    <div class="item-inner">
      <div class="item-title">Lorem ipsum</div>
    </div>
  </a>
</li>
8

If you insist on two buttons for support

accordionBeforeOpen: function (el) {
      /*insert the other button*/
    }
accordionBeforeClose: function (el) {
      /*remove the other button*/
    }
9

Thanks hongfu, it works great!