Bollate

HTML

[ANSWERED] html – How to expand and collapse template accordion using javascript?

By

Nov 19, 2022 ,

Solution 1 :

If you want to make it using pure js and css you need to have a css file that says something like this

CSS

.accordion > div > h5{
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #ccc;
  background-color: #eee;
}

.accordion > div > div{

  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.accordion > div.active > div{ /* changed the class name from ac-active to active
  display: block;
  padding: 10px;
}

and in JS file

let accordion = document.querySelector('.accordion')

Array.from(accordion.children).forEach(wrapper=>{ // wrapper is ac-item in your case
  wrapper.querySelector('h5').addEventListener('click', e=>{
    wrapper.classList.toggle('active');

    let divTag = wrapper.querySelector('div');
    if (wrapper.classList.contains("active")) {
        divTag.style.maxHeight = divTag.scrollHeight + 30 + 'px';
    } else {
        divTag.style.maxHeight = null;
    }

    Array.from(accordion.children).forEach(w=>{
      if (w != wrapper) {
        w.classList.remove('active');
        w.querySelector('div').style.maxHeight = null;
      }
    });
  });
});

Let me know if it worked for you

Solution 2 :

Here is the solution for jQuery. Make the dropdown text invisible by default by adding this to your css:

.ac-content {
  display: none;
}

$('.toggle.accordion.accordion-shadow .ac-item .ac-title').click(function(){
  $(this).next('.ac-content').slideToggle();
  $(this).closest('.ac-item').siblings().find('.ac-content').slideUp();
});
.ac-content {
  display: none;
}
<link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet">
<link href="https://bangi.africa/demo/css/style.css" rel="stylesheet">
<link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet">
<script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script>
<script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script>
<script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-inner">
    <section id="page-content">
        <div class="container">
            <div class="row">
                <div class="content col-lg-9">
                    <h4>Shadow</h4>
                    <div class="toggle accordion accordion-shadow">
          
                        <div class="ac-item" id="test">
                            <h5 class="ac-title">Before you get started</h5>
                            <div class="ac-content">
                                <p>test1</p>
                            </div>
                        </div>
            
                        <div class="ac-item ac-active">
                            <h5 class="ac-title">Layout and design options</h5>
                            <div class="ac-content">
                                <p>test2</p>
                            </div>
                        </div>
            
                        <div class="ac-item">
                            <h5 class="ac-title">Compatibility with premium plugins</h5>
                            <div class="ac-content">
                                <p>test3</p>
                            </div>
                        </div>
            
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Solution 3 :

To do this as the template does it, do this:

$('.ac-content').slideToggle();

$("#test").addClass("ac-active");

Problem :

I have an accordion that I want to dynamically open and close with JavaScript/jQuery. I am having trouble doing that.

<link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet">
<link href="https://bangi.africa/demo/css/style.css" rel="stylesheet">
<link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet">
<script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script>
<script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script>

<script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script>


<<div class="body-inner">
        <!-- Header -->

        
        <!-- Page Content -->
        <section id="page-content">
            <div class="container">



                <div class="row">
                    <div class="content col-lg-9">
                        

                        <h4>Shadow</h4>
                        <div class="toggle accordion accordion-shadow">
                            <div class="ac-item" id="test">
                                <h5 class="ac-title">Before you get started</h5>
                                <div class="ac-content">
                                    <p>test1</p>
                                </div>
                            </div>
                            <div class="ac-item ac-active">
                                <h5 class="ac-title">Layout and design options</h5>
                                <div class="ac-content">
                                    <p>test2</p>
                                </div>
                            </div>
                            <div class="ac-item">
                                <h5 class="ac-title">Compatibility with premium plugins</h5>
                                <div class="ac-content">
                                    <p>test3</p>
                                </div>
                            </div>
                        </div>
                        



                    </div>
                    

                </div>
            </div>
        </section>
        <!-- end: Page Content -->
        
        <!-- end: Footer -->
    </div> <!-- end: Body Inner -->

I have tried using something:

$("#test").addClass("ac-active");

or

$("#test").removeClass("ac-active");

But no luck, How can I expand and collapse the accordion/toggle using Javascript? This is a template I am using called Polo (https://inspirothemes.com/polo/index.html)

EDIT: Here’s the issue, the demo isn’t working on the embed. Past the code into a html file and it will work. I want to make ac-item test open and close with Javascript. How can I do that?

Comments

Comment posted by ControlAltDel

JQuery’s show and hide methods essentially add a timer to show() and hide() (along with some nifty animation). If you want to do this in pure JavaScript and/or CSS, just set CSS property to “none” vs. “block”/”inline”

Comment posted by Jack

@ControlAltDel But I would like to also be changing the + and -There’s no way to change the “state” of it as if it was clicked on?

Comment posted by Jack

How can I open and close “test” with a click of a button though is what I am asking?

Comment posted by s.kuznetsov

@Jack, I made the accordion the way you wanted. Check, pls. Or am I missing something from your question?

Comment posted by Jack

Yes, I put an edit in there. The accordion is working, I just need to open and close it with Javascipt, try using the code I posted in a independent HTML file.

Comment posted by s.kuznetsov

@Jack, Do you only need vanilla javascript, or jquery is also allowed?

Comment posted by tony

@Jack So what you’re saying is the accordion you’re using is from a template and it’s working but you just need to open and close it with a javascript call?

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022