• Resolved lusans

    (@lusans)


    Hello!
    I’m making accordions with a large amount of text. When you read to the bottom and click the next accordion, the large amount of text is collapsed and I’m left at the bottom of the page.

    I’d like to scroll to top of the specific active panel that is open.

    I found this code from Bootstrap accordion but I don’t know if it would help at all:

    $('.panel-collapse').on('shown.bs.collapse', function (e) {
        var $panel = $(this).closest('.panel');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }); 

    Please, it would be great not be left at the bottom of a page after closing an accordion with a large amount of text. Can you help me?
    Thank you in advance!

Viewing 10 replies - 1 through 10 (of 10 total)
  • hannah

    (@hannahritner)

    Hey,
    Do you mind posting a link to where you’ve added this?
    Thanks!

    Hannah

    Hey,
    You can use js like this:

    <script>
    jQuery( document ).ready( function( $ ) {
    $( '.kt-blocks-accordion-header' ).click( function( ) {
    var pane = $(this);
    setTimeout(function(){
     var $panel = pane.closest('.kt-accordion-pane');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }, 300 );
    });
    });
    </script>

    Ben

    Thread Starter lusans

    (@lusans)

    Thank you so much Ben! It’s working perfectly!
    It would be awesome if you could add this option in a future update! =)
    Thank you so much again!

    • This reply was modified 5 years, 6 months ago by lusans.

    Hey,
    Because this isn’t standard for accordions and most people don’t use accordions to hold huge content I can’t make it standard but this kind of script would always be supported.

    Ben

    Hi!

    I have the same issue with Elementor Accordions. I tried to solve it with the code above, but no results. Maybe you could help? ??

    This is a snipped Code:

    <div class=”elementor-accordion-item”>
    <h1 id=”elementor-tab-title-5882″ class=”elementor-tab-title” data-tab=”2″ role=”tab” aria-controls=”elementor-tab-content-5882″>
    <span class=”elementor-accordion-icon elementor-accordion-icon-left” aria-hidden=”true”>
    <i class=”elementor-accordion-icon-closed “></i>
    <i class=”elementor-accordion-icon-opened “></i>
    </span>
    Tumortherapie
    </h1>
    <div id=”elementor-tab-content-5882″ class=”elementor-tab-content elementor-clearfix” data-tab=”2″ role=”tabpanel” aria-labelledby=”elementor-tab-title-5882″ style=”display: none;”><p style=”text-align: center; margin-bottom: 0px !important;”></p>

    <div class=”subtumortherapie”>
    <h2 style=”text-align: center;”><span style=”color: #ffffff;”>Der Krebs schl?ft nicht …</span></h2>
    </div>
    <div class=”flex”>
    <div class=”tumortherapie”>
    <div class=”inhalt”>

    <div class=”content-column one_third”><h3 class=”p1″><span style=”color: #ffffff;”>Ein gro?er Teil unserer t?glichen Arbeit besteht
    in der Diagnostik und Therapie von urologischen
    Tumoren der Nieren, Blase, Prostata und
    Hoden.</span></h3></div><div class=”content-column two_third”><p class=”p1″>Entsprechend unserer fachlichen Qualifikation zur medikament?sen Tumortherapie stehen uns alle g?ngigen modernen medikament?sen Therapieformen – dem aktuellsten und modernsten Standard – zur Verfu?gung.</p><br>
    <p class=”p1″>? Chemotherapie</p>
    <p class=”p1″>? Hormonbehandlung</p>
    <p class=”p1″>? Immuntherapie</p>
    <br><p class=”p1″>In unseren speziell dafu?r eingerichteten Chemotherapier?umen werden die Patienten von speziell onkologisch ausgebildeten Mitarbeiterinnen betreut.</p><br>
    <p class=”p1″>Wir fu?hren alle Therapieformen der modernen und nebenwirkungsarmen ambulanten Tumortherapie in unserer Praxis durch. Die Immunonkologie hat in den vergangenen Jahren die Behandlung von verschiedenen urologischen Tumorerkrankungen geradezu revolutioniert und ist fester Bestandteil der Tumortherapie (sog, Checkpoint-Inhibitoren) unserer Praxis. Fru?here nebenwirkungsreich durchgefu?hrte Chemotherapien an Krankenh?usern k?nnen dadurch h?ufig vermieden werden.</p><br>
    <p class=”p1″>Die notwendigen gro?en Tumoroperationen werden in enger Kooperation mit den umliegenden urologischen Kliniken, nationalen und internationalen Universit?tskliniken durchgefu?hrt.</p><br>
    <p class=”p1″>Ebenso stehen fu?r Bestrahlungsf?lle entsprechende strahlentherapeutische Kliniken und Praxen – mit optimierter strahlen- und komplikationsreduzierter Behandlung – zur Verfu?gung. Insbesondere bei der lokalen strahlentherapeutischen Behandlung des Prostatacarcinoms arbeiten wir eng mit spezialisierten Kollegen zusammen, die Ihnen eine ambulante individualisierte Therapie vor Ort erm?glichen.</p><br>
    <p class=”p1″>Durch sogenannte lokale (fokale) Therapie k?nnen die Komplikationen und Nebenwirkungen bei urologischen Tumoren deutlich verringert und oft gro?e operative Eingriffe vermieden werden.</p><br>
    <p class=”p1″>Gerne stehen wir Ihnen auch fu?r ein ausfu?hrliches Beratungsgespr?ch im Rahmen einer sogenannten ?zweiten Meinung“ zur Verfu?gung.</p><br>
    <p class=”p1″>Selbstverst?ndlich befinden wir uns besonders bei der Behandlung von Tumorpatienten in st?ndigem engen Kontakt zu allen an der Therapie beteiligten Kollegen wie Operateuren, Pathologen, Strahlentherapeuten und natu?rlich den Haus?rzten der Patienten.</p><br>
    <p class=”p1″>Insbesondere im Bereich der Psychoonkologie und komplement?rer Therapien erg?nzen wir unserer Therapiespektrum fu?r unsere Krebspatienten.</p><br>
    <p class=”p1″>Unsere Praxis ist Gru?ndungsmitglied und Vorstand des URO-ONKOLOGISCHEN Netzwerks Bielefeld, welches eine optimale und individualisierte Versorgung von Tumorpatienten in enger, fachu?bergreifender Kooperation durch alle beteiligten Kollegen erm?glicht. Ihnen wird dadurch eine Konsultation und Behandlung aller am Netzwerk beteiligten Kollegen erm?glicht.</p><br>
    <p class=”p1″>Durch enge Kooperation mit dem PalliativNetz Bielefeld wird auch in fortgeschrittenen Tumorerkrankungen eine individuelle und fachlich ausgezeichnete, lebensqualitativ orientierte Versorgung erm?glicht.</p><br>
    <p class=”p1″>Das URO-ONKOLOGISCHE Netzwerk Bielefeld veranstaltet regelm??ige Veranstaltungen auf hohem wissenschaftlichen Niveau fu?r alle Kollegen und ist Begru?nder des regelm??ig stattfindenenden URO-ONKOLOGISCHEN Symposiums OWL.<br></p><p class=”p1″>Die Mitglieder des URO-ONKOLOGISCHEN ARBEITSKREISES Bielefeld treffen sich regelm??ig zu interdiziplin?ren Fallkonferenzen, um so individualisierte Behandlungskonzepte fu?r Ihre Tumorerkrankung zu erstellen.</p><br><p class=”p1″>Durch die jetzt etablierten und in Kraft getretenen ambulanten Versorgungsstrukturen zur Behandlung schwerer und kompliziert verlaufender Tumorerkrankungen (ASV) garantieren wir Ihnen eine optimale Versorgung aller im URO-ONKOLOGISCHEN Netzwerk kooperierenden ?rzte.</p><br><h3 class=”p1″><span style=”color: #ffffff;”>Urologische Onkologie</span></h3><br><p class=”p1″>Die Behandlung von b?sartigen Tumoren des urologischen Fachgebietes beinhaltet
    in vielen F?llen eine Chemotherapie. Wir fu?hren alle Chemotherapien des urologischen
    Gebietes sowohl station?r als auch ambulant – auch in Kooperation mit den
    Urologischen Kliniken und Kliniken fu?r H?mato-Onkologie – , sowie den niedergelassenen
    Onkologen durch.</p><br><p class=”p1″>In Kooperation mit den Universit?tskliniken fu?hren wir klinische Studien mit neuen
    Medikamenten durch.</p></div>

    </div>
    </div>
    </div></div>
    </div>
    <div class=”elementor-accordion-item”>
    <h1 id=”elementor-tab-title-5883″ class=”elementor-tab-title” data-tab=”3″ role=”tab” aria-controls=”elementor-tab-content-5883″>
    <span class=”elementor-accordion-icon elementor-accordion-icon-left” aria-hidden=”true”>
    <i class=”elementor-accordion-icon-closed “></i>
    <i class=”elementor-accordion-icon-opened “></i>
    </span>
    Andrologie
    </h1>
    <div id=”elementor-tab-content-5883″ class=”elementor-tab-content elementor-clearfix” data-tab=”3″ role=”tabpanel” aria-labelledby=”elementor-tab-title-5883″ style=”display: none;”><p style=”text-align: center; margin-bottom: 0px !important;”></p>

    <div class=”subandrologie”>
    <h2 style=”text-align: center;”><span style=”color: #ffffff;”>Da steckt Mann nicht drin …</span></h2>
    </div>
    <div class=”flex”>
    <div class=”andrologie”>
    <div class=”inhalt”>

    <div class=”content-column one_third”><h3 class=”p1″><span style=”color: #ffffff;”>Der j?hrliche Besuch des Frauenarztes ist fu?r
    Frauen selbstverst?ndlich – wir m?chten ein
    entsprechendes Angebot an M?nner machen.</span></h3></div><div class=”content-column two_third”><p class=”p1″>Im Rahmen der ?M?nnermedizin“ geht es um Vorsorgeuntersuchungen, oft aber
    auch um Fragestellungen wie Steigerung der Leistungsf?higkeit, Ausgleich von
    Hormonmangel zust?nden des ?lterwerdenden Mannes (Aging male) oder Behandlung
    von Erektionsst?rungen. Auch die gesamten therapeutischen M?glichkeiten
    des Anti-Aging, einschlie?lich Pr?vention geh?rt zum Leistungsspektrum der Praxis.</p><br>
    <p class=”p1″>Ern?hrungsberatung und Nahrungserg?nzungsmittel komplettieren die
    Behandlungsm?glichkeiten. Auch hinsichtlich der Krebspr?vention durch den
    Einfluss der Ern?hrung bieten wir Ihnen ein breites Angebot, welches auf
    wissenschaftlichen Erkenntnissen basiert.</p><br>
    <p class=”p1″>Durch eine spezielle Fortbildung zum M?nnerarzt mit laufender Weiterbildung
    wird Ihnen gr??tm?gliche Fachkompetenz geboten. Wir tauschen uns regelm??ig
    u?ber entsprechende Fachgesellschaften und internationale Kongresse mit Kollegen
    aus, um Ihnen immer den aktuellsten und modernsten Standard zu bieten.</p><br>
    <p class=”p1″>Viele Paare bleiben ungewollt kinderlos und bedu?rfen deshalb einer andrologischen
    Abkl?rung. Hier bieten wir Untersuchung der m?nnlichen Fruchtbarkeit,
    Bestimmung des Hormonstatus , Infektuntersuchungen – auch auf sexuell
    u?bertragbare Erkrankungen -und insbesondere Anfertigung von Spermiogrammen
    nach international vergleichbaren WHO-Standard an. Die dafu?r notwendigen
    Laborparameter werden in unserem Praxislabor unter st?ndiger interner und externer Qualit?tskontrolle durch dafu?r zertifizierte Zentren angefertigt. Die im
    eigenen Speziallabor unserer Praxis durchgefu?hrten Laboratoriumsuntersuchungen
    bieten mit der optimierten Analyse gr??tm?gliche Sicherheit.</p><br>
    <p class=”p1″>Durch enge Zusammenarbeit mit reproduktionsmedizinischen Zentren k?nnen
    wir Hilfe anbieten, wenn eine ku?nstliche Befruchtung notwendig sein sollte.
    Hier stehen Ihnen neben allen therapeutischen M?glichkeiten der ku?nstlichen
    Befruchtung auch s?mtliche operativen Vorgehensweisen (u.a. testicul?re
    Spermienextraktion – TESE) zur Verfu?gung.</p><br>
    <p class=”p1″>Bei erfu?lltem Kinderwunsch stellt sich oft die Frage nach nebenwirkungsfreier,
    dauerhafter Verhu?tung, ohne die Ehefrauen mit jahrelanger Einnahme von
    Hormonpr?paraten zu belasten. Hier bieten wir als h?ufig durchgefu?hrten
    Eingriff die ambulante operative Sterilisation des Mannes in Lokalan?sthesie
    oder bei Wunsch auch in Vollnarkose in Kooperation mit urologischen Kliniken
    der Umgebung an (siehe Sterilisation des Mannes).</p><br>
    <h3 class=”p1″><span style=”color: #ffffff;”>Infertilit?t</span></h3><br>
    <p class=”p1″>Bei unerfu?lltem Kinderwunsch helfen spezielle Untersuchungen der Hormone, des
    Spermas nach internationalem WHO-Standart, Untersuchungen auf fruchtbarkeitsmindernde
    Infektionen, der Organe (Hoden, Nebenhoden, Prostata und Samenblasen)
    bei der Ursachenkl?rung auf Seiten des Mannes. Eine enge Kooperation mit
    den Frauen?rzten hilft bei der Ursachenkl?rung auf Seiten der Frau.</p><br><p class=”p1″>Bei schweren Beeintr?chtigungen der Fruchtbarkeit stehen medikament?se und
    operative Therapieoptionen (z.B. TESE – Entnahme von Spermien aus den Hoden) zur Verfu?gung.</p><br><p class=”p1″>Wir arbeiten in enger Kooperation mit nationalen und internationalen Zentren fu?r
    Reproduktionsmedizin zusammen und bieten Ihnen das gesamte moderne therapeutische
    Spektrum zur Erfu?llung Ihres Kinderwunsches.</p><br><p class=”p1″>Alle diagnostischen M?glichkeiten, welche im Rahmen der gesetzlich vorgegebenen
    Bestimmungen m?glich sind, werden angeboten.</p><br><p class=”p1″>Im Besonderen wird in diesem Zusammenhang auf die M?glichkeit der Gendiagnostik
    und Beratung verwiesen.</p></div>

    </div>
    </div>
    </div></div>
    </div>

    Thanks a lot!

    Hey @kulaber it’s best to contact elementor support. They would be in a position to give you an accurate answer.

    Just to throw out a guess you could try:

    <script>
    jQuery( document ).ready( function( $ ) {
    $( '.elementor-tab-title' ).click( function( ) {
    var pane = $(this);
    setTimeout(function(){
     var $panel = pane.closest('.elementor-accordion-item');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }, 300 );
    });
    });
    </script>

    @britner Just want to say thank you for the code snippet! It works!

    Hi.. I’ve tried the snippet you gave and its working but everytime I click a tab, it scroll up to the first tab. It doesn’t scroll to the active page. This is my code below.

    <div class="mkdf-accordion-holder mkdf-ac-default mkdf-ac-simple  mkdf-accordion  clearfix ui-accordion ui-widget ui-helper-reset" role="tablist">
    	<p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 1 : Arrival in Kota Kinabalu</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575517842191">
    		<div class="wpb_wrapper">
    			<p>Upon arrival at the Kota Kinabalu International Airport, you will be picked up and transferred to the beautiful Shangri-La’s Tanjung Aru Resort & Spa for your stay.</p>
    <p>&nbsp;</p>
    <p>It will be free and easy for the rest of the day and can take the time to discover Kota Kinabalu. Popular attractions are the Night Market and the KK Waterfront where the nightlife is abound.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Rasa-Ria-Resort-1.jpg" alt="" width="728" height="546" /></strong></p>
    <p><strong>Included</strong> : Accommodation Shangri-La’s Tanjung Aru Resort & Spa – Kinabalu Sea View & Transportation from Airport to Hotel</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="0">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 2 : Kota Kinabalu</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573454064370">
    		<div class="wpb_wrapper">
    			<p>The day is free and easy and there is time to relax at the resorts big pool area. Or maybe you like to explore the attractions surrounding Kota Kinabalu, such as the Signal Hill Observatory Platform, Atkinson Clock Tower, the Floating Mosque, the Puh Toh Tze Temple, Sabah Museum and more. You can also visit the KK Handicraft Market and shop for souvenirs if you wish to do so. It is highly recommneded to enjoy the sunset from the resort’s Sunset Bar.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Sunset-Bar-Shangri-Las-Tanjung-Aru-Resort.jpg" alt="" width="691" height="518" /></strong></p>
    <p><strong>Included</strong> : Accommodation Shangri-La’s Tanjung Aru Resort & Spa – Kinabalu Sea View</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-5" aria-controls="ui-id-6" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 3 : Kota Kinabalu - Sandakan - Lankayan Island</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-6" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518028814">
    		<div class="wpb_wrapper">
    			<p>After breakfast and checking out of your hotel, you will be transferred to Kota Kinabalu Airport for your flight to Sandakan.</p>
    <p>&nbsp;</p>
    <p>Upon arrival at the Sandakan Airport, you will then be transferred to the Sandakan Jetty and take a 1 ? hour boat transfer to Lankayan Island. Check-in upon arrival and spend the rest of the day at leisure.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Lankayan-Island-arial.jpg" alt="" width="692" height="519" /></strong></p>
    <p><strong>Included</strong> : Accommodation Lankayan Island Resort, Transportation to and from airports & Boat transfer to Lankayan Island</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-7" aria-controls="ui-id-8" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 4 : Lankayan Island</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-8" aria-labelledby="ui-id-7" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573454243690">
    		<div class="wpb_wrapper">
    			<p>Relax and enjoy the small tropical paradise island. The island is surrendered with turquoise colored waters and beautiful coral reefs. The island is often visited by sea turtles. If you are lucky you can see the turtles laying eggs on the island during night time (monitored by rangers).</p>
    <p style="text-align: justify;">.<img src="https://rustic-travel.com/wp-content/uploads/2019/11/turtle-island-kota-kinabalu.jpg" alt="" width="760" height="570" /></p>
    <p><strong>Included</strong> : Accommodation Lankayan Island Resort</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    <p><strong>&nbsp;</strong></p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-9" aria-controls="ui-id-10" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 5 : Lankayan Island</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-10" aria-labelledby="ui-id-9" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573454369449">
    		<div class="wpb_wrapper">
    			<p>Sunbathe, snorkel or just spend the day at leisure at Lankayan Island. Enjoy a warm dip in the water and drink in the serenity of the island.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Lankayan-Island-Chalets.jpg" alt="" width="628" height="508" /></p>
    <p><strong>Included</strong> : Accommodation Lankayan Island Resort</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-11" aria-controls="ui-id-12" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 6 : Lankayan Island - Sepilok Orangutan Rehabilitation Centre - Sukau Rainforest Lodge</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-12" aria-labelledby="ui-id-11" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518081847">
    		<div class="wpb_wrapper">
    			<p>After breakfast, you will return to Sandakan and visit the Sepilok Orangutan Rehabilitation Centre.</p>
    <p>&nbsp;</p>
    <p>Watch a short video documentary of the rehabilitation activities before taking a stroll on the boardwalk through the lowland rainforest to witness the feeding of the Orang Utan at 10.00am. You will be transferred back to the Sandakan Jetty and go on a 2 ? hours boat ride to the multi award-winning Sukau Rainforest Lodge, along Sabah’s longest river, the Kinabatangan River. This gives you the opportunity to go bird watching and wildlife-spotting in the virgin mangrove area, wetland and rainforest habitats.</p>
    <p>&nbsp;</p>
    <p>After checking in and enjoying your afternoon refreshment, you will go on a river cruise in search of some of the 10 primate species. Sukau is home to the famous Bornean pygmy elephants, orang utans, proboscis monkeys and all eight species of hornbills in Borneo. Return for solar heated hot shower, candle-lit dinner overlooking the riverbanks, followed by slideshow presentation and nature interpretation by a naturalist guide.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/baby-orangutan-rasa-ria.jpg" alt="" width="681" height="511" /></p>
    <p><strong>Included</strong> :Boat Transfer to Sukau Rainforest Lodge, Visit Sepilok Orangutan Centre, Accommodation at Sukau Rainforest Lodge – Deluxe Villa, River Cruise & English-speaking Guide</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-13" aria-controls="ui-id-14" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 7 : Sukau Rainforest Lodge</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-14" aria-labelledby="ui-id-13" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518098693">
    		<div class="wpb_wrapper">
    			<p>Wake up to the calls of gibbons and hornbills and hot Sabah tea!</p>
    <p>At 6.00am before breakfast, you will go on a morning river cruise up the Kinabatangan River to Kelenanap oxbow lake to view more birds and wildlife.</p>
    <p>&nbsp;</p>
    <p>After breakfast, proceed to have an educational tour at our the in-house Hornbill Boardwalk, located behind the lodge with the naturalist.</p>
    <p>&nbsp;</p>
    <p>In the afternoon, you will proceed to have another river cruise for more wildlife sighting. Overnight stay at the Sukau Rainforest Lodge.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/elephants-sukau-sabah-malaysia.jpg" alt="" width="680" height="510" /></strong></p>
    <p><strong>Included</strong> : English-speaking Guide, Accommodation Sukau Rainforest Lodge – Deluxe Villa & River Cruises</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & DInner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-15" aria-controls="ui-id-16" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 8 : Sukau - Lahad Datu - Borneo Rainforest Lodge</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-16" aria-labelledby="ui-id-15" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518136243">
    		<div class="wpb_wrapper">
    			<p>Today, your journey begins with an overland transfer to Lahad Datu.</p>
    <p>&nbsp;</p>
    <p>After lunch, you will go on a 70 kilometer journey on gravelled road to Danum Valley. The area covers a sprawling 438-square kilometer undisturbed area of lowland dipterocarp rainforest in Sabah.</p>
    <p>&nbsp;</p>
    <p>Have your first introduction of the forest in the afternoon through the Nature Trails and explore the 300-meter treetop Canopy Walkway for a close-up observation of the rainforest.</p>
    <p>&nbsp;</p>
    <p>Danum Valley is home to many species of Borneo’s unique lowland fauna, such as the Clouded Leopards, Sumatran Rhinoceros, Pygmy Elephants and Orangutans (do not expect to see them).</p>
    <p>&nbsp;</p>
    <p>After dinner, proceed to have a night drive in an open-top vehicle in search of nocturnal animals. Overnight stay at the Borneo Rainforest Lodge.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Borneo-Rainforest-Lodge-Canopy-walkway.jpg" alt="" width="619" height="464" /></p>
    <p><strong>Included</strong> : English-speaking Guide, Accommodation Borneo Rainforest Lodge – Deluxe & Transportation to Danum Valley</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 9 : Borneo Rainforest Lodge - Danum Valley</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-18" aria-labelledby="ui-id-17" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518167631">
    		<div class="wpb_wrapper">
    			<p>Spend the whole day exploring the rainforest for more chances of spotting birds and mammals.</p>
    <p>&nbsp;</p>
    <p>Trek to the ancient KadazanDusun burial site aka the Coffin Cliff, before continue trekking to the viewing point, for a bird’s eye view of the valley.</p>
    <p>&nbsp;</p>
    <p>Take your time to catch your breath and relax before descending to the Jacuzzi Pool for a refreshing dip in the rock pools, before returning to the lodge for lunch.</p>
    <p>&nbsp;</p>
    <p>You can go for another jungle trekking session in the afternoon or you can opt to go tubing down the Danum River.</p>
    <p>&nbsp;</p>
    <p>After dinner, enjoy a night walk for more wildlife watching experience. Overnight stay at the Borneo Rainforest Lodge.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Red-Leaf-Monkey.jpg" alt="" width="676" height="507" /></strong></p>
    <p><strong>Included</strong> : English-speaking guide & Accommodation at Borneo Rainforest Lodge – Deluxe</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast, Lunch & Dinner</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-19" aria-controls="ui-id-20" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 10 : Borneo Rainforest Lodge - Lahad Datu - Kota Kinabalu - Bunga Raya Island Resort & Spa</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-20" aria-labelledby="ui-id-19" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1575518195325">
    		<div class="wpb_wrapper">
    			<p>After lunch, you will embark on a two-hour journey to the Lahad Datu Airport to catch your flight to Kota Kinabalu. Upon reaching Kota Kinabalu, you will take a 20-minute boat ride from the Jesselton Point Jetty to the Bunga Raya Island Resort & Spa.</p>
    <p>&nbsp;</p>
    <p>From today onward, it’s going to be free and easy for you. Spend the last leg of your vacation lazing by the pool and soaking up the sun, while sipping delicious cocktail!</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Bunga-Raya.jpg" alt="" width="683" height="512" /></strong></p>
    <p><strong>Included</strong> : Accommodation Bunga Raya Island Resort & Spa – Plunge Pool Villa & Transportation to Bunga Raya Island Resort & Spa</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast & Lunch</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-21" aria-controls="ui-id-22" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 11 : Bunga Raya Island Resort & Spa</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-22" aria-labelledby="ui-id-21" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573455049418">
    		<div class="wpb_wrapper">
    			<p>Enjoy a leisurely stay at Bunga Raya Island Resort & Spa while splitting your time between snorkeling, lounging by the pool, walking on the beach, indulging on scrumptious food and enjoying a luxurious spa treatment.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/bunga-raya-resort-sabah-poolside.jpg" alt="" width="636" height="477" /></p>
    <p><strong>I</strong><strong>ncluded</strong> : Accommodation at Bunga Raya Island Resort & Spa – Plunge Pool Villa</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-23" aria-controls="ui-id-24" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 12 : Bunga Raya Island Resort & Spa</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-24" aria-labelledby="ui-id-23" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573455118540">
    		<div class="wpb_wrapper">
    			<p style="text-align: justify;">Get active with activities such as kayaking, motor boating and jet skiing while you’re on holiday! The more active you get, the more you can indulge in the yummy food that the resort has got to offer.</p>
    <p><strong><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Kayaking-Bunga-Raya.jpg" alt="" width="675" height="506" /></strong></p>
    <p><strong>Included</strong> : Accommodation at Bunga Raya Island Resort & Spa – Plunge Pool Villa</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-25" aria-controls="ui-id-26" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 13 : Bunga Raya Island Resort & Spa</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-26" aria-labelledby="ui-id-25" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573455195914">
    		<div class="wpb_wrapper">
    			<p style="text-align: justify;">Explore the jungle area of Bunga Raya by going jungle trekking! You can also opt to go diving or visit the Tunku Abdul Rahman (TAR) Marine Park if you wish to do so.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Bunga-Raya-Beach.jpg" alt="" width="687" height="515" /></p>
    <p><strong>Included</strong> : Accommodation at Bunga Raya Island Resort & Spa – Plunge Pool Villa</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div><p class="mkdf-accordion-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-27" aria-controls="ui-id-28" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="mkdf-accordion-mark">
    		<span class="mkdf_icon_plus arrow_carrot-down"></span>
    		<span class="mkdf_icon_minus arrow_carrot-up"></span>
    	</span>
    	<span class="mkdf-tab-title">Day 14 : Departure</span>
    </p>
    <div class="mkdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-28" aria-labelledby="ui-id-27" role="tabpanel" aria-hidden="true" style="display: none;">
    	<div class="mkdf-accordion-content-inner">
    		<div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
    	<div class="wpb_text_column wpb_content_element  vc_custom_1573455280720">
    		<div class="wpb_wrapper">
    			<p style="text-align: justify;">Upon checking out from your hotel, you will take a boat ride to Kota Kinabalu City and take another land transfer to the airport for your departure flight.</p>
    <p><img src="https://rustic-travel.com/wp-content/uploads/2019/11/Bunga-Raya-Island-Jetty.jpg" alt="" width="679" height="509" /></p>
    <p><strong>Included</strong> : Transportation to Kota Kinabalu Airport</p>
    <p>&nbsp;</p>
    <p><strong>Meals : </strong>Breakfast</p>
    
    		</div>
    	</div>
    </div></div></div></div>	</div>
    </div></div>

    Thank You!

    @ben,

    Hi, I have a question about your script/code:
    It works great but because I use a header-plugin that makes the header sticky, the accordion just positions itself under the header.
    When I deactivate the plugin (sticky header) it works just fine.

    Is there a way to add something like “100px from top” to the code?
    I don’t understand a thing about coding so I would not know if it’s possible or where and how to put it in..

    Thank you very much!

    <script>
    jQuery( document ).ready( function( $ ) {
    $( ‘.elementor-tab-title’ ).click( function( ) {
    var pane = $(this);
    setTimeout(function(){
    var $panel = pane.closest(‘.elementor-accordion-item’);
    $(‘html,body’).animate({
    scrollTop: $panel.offset().top
    }, 500);
    }, 500 );
    });
    });
    </script>

    hannah

    (@hannahritner)

    Hi @koendelbroek,
    This topic has been marked as resolved. Can you please start a new thread?
    Thanks!

    Hannah

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Accordion, scroll to top of active (open) accordion on click?’ is closed to new replies.