I use a custom accordion like this. When I click on the accordions other than the open accordion, the open one will be closed.
Here are the css and jquery codes.
jQuery(document).ready(function($) {
jQuery(".toggle_trigger").on("click", function() {
let $this = $(this);
if ($this.hasClass('tab_active')) {
$this.removeClass('tab_active');
$this.next(".toggle_content").slideUp(200);
} else {
$this.toggleClass('tab_active');
$this.next('.toggle_content').slideDown(200);
}
});
});body:not(.elementor-editor-active) .toggle_content {
display : none
}
.toggle_trigger {
cursor : pointer
}
.arrow i {
transition-duration : 0.5s;
}
.tab_active .arrow i {
transition-property : transform;
-ms-transform : rotate(180deg) !important;
/* IE 9 */
transform : rotate(180deg) !important;
transition-duration : 0.5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>I tried the codes I saw on a topic here on query, but I couldn't run it.
CodePudding user response：
Add
jQuery(".tab_active").removeClass('tab_active').next('.toggle_content').slideUp(200);
above $this.toggleClass('tab_active');
jQuery(document).ready(function($) {
jQuery(".toggle_trigger").on("click", function() {
let $this = $(this);
if ($this.hasClass('tab_active')) {
$this.removeClass('tab_active');
$this.next(".toggle_content").slideUp(200);
} else {
jQuery(".tab_active").removeClass('tab_active').next('.toggle_content').slideUp(200);
$this.toggleClass('tab_active');
$this.next('.toggle_content').slideDown(200);
}
});
});body:not(.elementor-editor-active) .toggle_content {
display : none
}
.toggle_trigger {
cursor : pointer
}
.arrow i {
transition-duration : 0.5s;
}
.tab_active .arrow i {
transition-property : transform;
-ms-transform : rotate(180deg) !important;
/* IE 9 */
transform : rotate(180deg) !important;
transition-duration : 0.5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div data-id="76be618" data-element_type="widget" data-widget_type="heading.default">
<div >
<h2 >Neden Topraq</h2> </div>
</div>
<div data-id="9e4407b" data-element_type="widget" data-widget_type="shortcode.default">
<div >
<div > <div data-elementor-type="section" data-elementor-id="9953" >
<section data-id="2c162e6" data-element_type="section">
<div >
<div data-id="f5abe69" data-element_type="column">
<div >
<section data-id="97c365d" data-element_type="section" data-settings="{"background_background":"classic","background_motion_fx_motion_fx_scrolling":"yes","background_motion_fx_translateY_effect":"yes","background_motion_fx_range":"viewport","background_motion_fx_motion_fx_mouse":"yes","background_motion_fx_mouseTrack_effect":"yes","background_motion_fx_mouseTrack_direction":"negative","background_motion_fx_translateY_speed":{"unit":"px","size":4,"sizes":[]},"background_motion_fx_translateY_affectedRange":{"unit":"%","size":"","sizes":{"start":0,"end":100}},"background_motion_fx_devices":["desktop","tablet","mobile"],"background_motion_fx_mouseTrack_speed":{"unit":"px","size":1,"sizes":[]}}" style="--e-transform-transition-duration:100ms;"><div ><div style="width: 110%; height: 140%; --translateY:-11.0946px; --translateX:-0.0512785px; transform: translateY(var(--translateY))translateX(var(--translateX));"></div></div>
<div >
<div data-id="c478d5a" data-element_type="column">
<div >
<div data-id="dc04bcb" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
<div data-id="40d4e0b" data-element_type="column">
<div >
<div data-id="0484d07" data-element_type="widget" data-widget_type="heading.default">
<div >
<p >Tarımın geleceğine inanıyoruz.</p> </div>
</div>
</div>
</div>
<div data-id="9017b78" data-element_type="column">
<div >
<div data-id="2e8e59d" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-id="d5e7c3e" data-element_type="section" data-settings="{"background_background":"classic"}">
<div >
<div data-id="c5bc8ad" data-element_type="column">
<div >
<div data-id="183668f" data-element_type="widget" data-widget_type="text-editor.default">
<div >
<p>Tarımı, veriyi ve matematiği seviyoruz. Büyük Veri, IoT ve Yapay Zeka’nın tarımın geleceği olacağına inanıyoruz.</p> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section data-id="b663ac4" data-element_type="section">
<div >
<div data-id="ba5729d" data-element_type="column">
<div >
<section data-id="d382d7b" data-element_type="section" data-settings="{"background_background":"classic","background_motion_fx_motion_fx_scrolling":"yes","background_motion_fx_translateY_effect":"yes","background_motion_fx_range":"viewport","background_motion_fx_motion_fx_mouse":"yes","background_motion_fx_mouseTrack_effect":"yes","background_motion_fx_mouseTrack_direction":"negative","background_motion_fx_translateY_speed":{"unit":"px","size":4,"sizes":[]},"background_motion_fx_translateY_affectedRange":{"unit":"%","size":"","sizes":{"start":0,"end":100}},"background_motion_fx_devices":["desktop","tablet","mobile"],"background_motion_fx_mouseTrack_speed":{"unit":"px","size":1,"sizes":[]}}" style="--e-transform-transition-duration:100ms;"><div ><div style="width: 110%; height: 140%; --translateY:-11.0946px; --translateX:-0.0512785px; transform: translateY(var(--translateY))translateX(var(--translateX));"></div></div>
<div >
<div data-id="cb136d4" data-element_type="column">
<div >
<div data-id="62e888f" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
<div data-id="c9146cc" data-element_type="column">
<div >
<div data-id="4d9a61c" data-element_type="widget" data-widget_type="heading.default">
<div >
<p >Abonelik modelimiz ile sizi yatırım yükünden kurtarıyoruz.</p> </div>
</div>
</div>
</div>
<div data-id="ce91189" data-element_type="column">
<div >
<div data-id="d9a1a0e" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-id="2323776" data-element_type="section" data-settings="{"background_background":"classic"}">
<div >
<div data-id="218e0eb" data-element_type="column">
<div >
<div data-id="c6fab98" data-element_type="widget" data-widget_type="text-editor.default">
<div >
<p>Yolculuğumuz, tarımsal saha verilerine daha uygun maliyetler ile ulaşabilmek adına kendi donanımımızı tasarlamak ve üretmekle başladı. Makul fiyatlar ile tüm çiftçilerin Tarım Teknolojileri ürünlerine ve hizmet paketlerimize ulaşmasını hedefliyoruz.</p> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section data-id="b3c9270" data-element_type="section">
<div >
<div data-id="98bd95f" data-element_type="column">
<div >
<section data-id="2ca0b20" data-element_type="section" data-settings="{"background_motion_fx_translateY_effect":"yes","background_motion_fx_range":"viewport","background_motion_fx_mouseTrack_effect":"yes","background_motion_fx_mouseTrack_direction":"negative","background_motion_fx_translateY_speed":{"unit":"px","size":4,"sizes":[]},"background_motion_fx_translateY_affectedRange":{"unit":"%","size":"","sizes":{"start":0,"end":100}},"background_motion_fx_devices":["desktop","tablet","mobile"],"background_motion_fx_mouseTrack_speed":{"unit":"px","size":1,"sizes":[]}}">
<div >
<div data-id="2b7ffb3" data-element_type="column">
<div >
<div data-id="5189048" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
<div data-id="f9edd2b" data-element_type="column">
<div >
<div data-id="2081d30" data-element_type="widget" data-widget_type="heading.default">
<div >
<p >Karlılığınızı arttırın.</p> </div>
</div>
</div>
</div>
<div data-id="a3cebe6" data-element_type="column">
<div >
<div data-id="2921e5c" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-id="1b718f2" data-element_type="section" data-settings="{"background_background":"classic"}">
<div >
<div data-id="f52e2f8" data-element_type="column">
<div >
<div data-id="f8e3702" data-element_type="widget" data-widget_type="text-editor.default">
<div >
<p>Su, gübre, enerji ve iş gücü gibi girdi maliyetlerindeki düşüş ile çiftçilerimizin karlılığının artmasını sağlıyor, sürdürülebilir tarım süreçlerini oluşturmalarına destek oluyoruz.</p> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section data-id="dc7b054" data-element_type="section">
<div >
<div data-id="3138408" data-element_type="column">
<div >
<section data-id="880f50c" data-element_type="section" data-settings="{"background_motion_fx_translateY_effect":"yes","background_motion_fx_range":"viewport","background_motion_fx_mouseTrack_effect":"yes","background_motion_fx_mouseTrack_direction":"negative","background_motion_fx_translateY_speed":{"unit":"px","size":4,"sizes":[]},"background_motion_fx_translateY_affectedRange":{"unit":"%","size":"","sizes":{"start":0,"end":100}},"background_motion_fx_devices":["desktop","tablet","mobile"],"background_motion_fx_mouseTrack_speed":{"unit":"px","size":1,"sizes":[]}}">
<div >
<div data-id="c98078e" data-element_type="column">
<div >
<div data-id="f1c10d0" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
<div data-id="bb00299" data-element_type="column">
<div >
<div data-id="8725370" data-element_type="widget" data-widget_type="heading.default">
<div >
<p >0 Kurulum ve Teknik servis desteği ile sahadayız.</p> </div>
</div>
</div>
</div>
<div data-id="8c42bb6" data-element_type="column">
<div >
<div data-id="987304b" data-element_type="widget" data-widget_type="icon.default">
<div >
<div >
<div >
<i aria-hidden="true" ></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-id="3c2542f" data-element_type="section" data-settings="{"background_background":"classic"}">
<div >
<div data-id="4cb3337" data-element_type="column">
<div >
<div data-id="9ddac9d" data-element_type="widget" data-widget_type="text-editor.default">
<div >
<p>8 ülke, 40’dan fazla şehirde ekiplerimizle sahada direkt ürün & servis kurulumu ve teknik destek sunuyoruz.</p> </div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>P.S. all this can be achieved in pure CSS without any bloatware jquery