What could be the reason that the accordion is failing to expand or collapse when clicked?

Question

What could be the reason that the accordion is failing to expand or collapse when clicked?

I am facing an issue where the div is not expanding or collapsing upon clicking the + sign. I have tried removing unnecessary scripts but it still doesn't work. Additionally, there is an error in the console:

Uncaught TypeError: $(...).slideReveal is not a function

            <div class="card">
                <div class="card-header" id="headingOne">
                    <div class="row" style="margin-top: -15px; height:52px;">

                        <div class="col-6 pt-3">
                            <h5 class="font-mobile">Planning Engineer</h5>
                        </div>

                        <div class="col-6 pt-3" style="height:auto;">
                            <h5 class="mb-2 text-right">
                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    <h5>+</h5>
                                </button>
                            </h5>
                        </div>
                    </div>

                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body" style="height:auto;">
                            <h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
                            <ul class="text-justify ul-xs">
                               // job description details here ...
                            </ul>
                            <h5> As our ideal candidate you will have:</h5>
                            <ul class="text-justify ul-xs">
                              // candidate requirements listed here ...
                            </ul>

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

Here's the source code of head being rendered.


  // main stylesheet and js imports

Updated: Tried to implement a new sequence for the script loading, but the issue persists.


    // updated script import sequence

html css twitter-bootstrap bootstrap-4 accordion

Answer 1

Answer №1

The unnecessary data-parent="#accordion" attribute was mistakenly added to the

<div id="collapseOne" class="collapse" aria-labelledby="headingOne">

line. I have rectified this in the following code snippet by eliminating that attribute. Hopefully, this correction resolves the issue for you. Thank you.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-header" id="headingOne">
        <div class="row" style="margin-top: -15px; height:52px;">

            <div class="col-6 pt-3">
                <h5 class="font-mobile">Planning Engineer</h5>
            </div>

            <div class="col-6 pt-3" style="height:auto;">
                <h5 class="mb-2 text-right">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <h5>+</h5>
                    </button>
                </h5>
            </div>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
            <div class="card-body" style="height:auto;">
                <h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
                <ul class="text-justify ul-xs">
                    <li>Prepare and update project schedule based on the contract.</li>
                    <li>Set work program and target milestones for each phase based on the project plan</li>
                    <li>Monitor critical activities based on the project schedule and advise project management.</li>
                    <li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
                    <li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
                    <li>Maintain and record update of work progress obtained from Project Manager.</li>
                    <li>Prepares monthly report reflecting work progress summary.</li>
                    <li>Provide process support to the other engineering disciplines</li>
                    <li>Provide specialist technical input into team project work</li>
                    <li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
                    <li>Prepare and review project proposals, studies, and technical reports</li>
                    <li>Travel to sites as needed.</li>
                </ul>
                <h5> As our ideal candidate you will have:</h5>
                <ul class="text-justify ul-xs">
                    <li>Bachelor or higher degree in Engineering</li>
                    <li>At least 7-8 years of experience in oil and gas sector.</li>
                    <li>Strong command on MS Project, MS excel and Primavera P6</li>
                    <li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
                    <li>Outstanding record of academic achievement.</li>
                    <li>Ability to work effectively with people at all levels in an organization.</li>
                    <li>Excellent analytical and quantitative problem-solving skills.</li>
                    <li>Knowledge of International and Local applicable environmental laws and regulations.</li>
                </ul>

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

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

The unnecessary data-parent="#accordion" attribute was mistakenly added to the

<div id="collapseOne" class="collapse" aria-labelledby="headingOne">

line. I have rectified this in the following code snippet by eliminating that attribute. Hopefully, this correction resolves the issue for you. Thank you.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <div class="card-header" id="headingOne">
        <div class="row" style="margin-top: -15px; height:52px;">

            <div class="col-6 pt-3">
                <h5 class="font-mobile">Planning Engineer</h5>
            </div>

            <div class="col-6 pt-3" style="height:auto;">
                <h5 class="mb-2 text-right">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <h5>+</h5>
                    </button>
                </h5>
            </div>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
            <div class="card-body" style="height:auto;">
                <h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
                <ul class="text-justify ul-xs">
                    <li>Prepare and update project schedule based on the contract.</li>
                    <li>Set work program and target milestones for each phase based on the project plan</li>
                    <li>Monitor critical activities based on the project schedule and advise project management.</li>
                    <li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
                    <li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
                    <li>Maintain and record update of work progress obtained from Project Manager.</li>
                    <li>Prepares monthly report reflecting work progress summary.</li>
                    <li>Provide process support to the other engineering disciplines</li>
                    <li>Provide specialist technical input into team project work</li>
                    <li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
                    <li>Prepare and review project proposals, studies, and technical reports</li>
                    <li>Travel to sites as needed.</li>
                </ul>
                <h5> As our ideal candidate you will have:</h5>
                <ul class="text-justify ul-xs">
                    <li>Bachelor or higher degree in Engineering</li>
                    <li>At least 7-8 years of experience in oil and gas sector.</li>
                    <li>Strong command on MS Project, MS excel and Primavera P6</li>
                    <li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
                    <li>Outstanding record of academic achievement.</li>
                    <li>Ability to work effectively with people at all levels in an organization.</li>
                    <li>Excellent analytical and quantitative problem-solving skills.</li>
                    <li>Knowledge of International and Local applicable environmental laws and regulations.</li>
                </ul>

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

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 3

Answer №2

If you're encountering issues with executing a method before the DOM is ready for manipulation, it may be due to all your script tags being placed within the head tag rather than after the body content. To resolve this, consider wrapping your function call in the following format:

$(function() {
  // Handler for .ready() called.
})

For more information, you can refer to: https://api.jquery.com/ready/

On another note, optimizing the page by bundling resources can significantly improve the load time for users, even though it's unrelated to the current issue.

Answer 4

If you're encountering issues with executing a method before the DOM is ready for manipulation, it may be due to all your script tags being placed within the head tag rather than after the body content. To resolve this, consider wrapping your function call in the following format:

$(function() {
  // Handler for .ready() called.
})

For more information, you can refer to: https://api.jquery.com/ready/

On another note, optimizing the page by bundling resources can significantly improve the load time for users, even though it's unrelated to the current issue.

What could be the reason that the accordion is failing to expand or collapse when clicked?

Answer №1

Answer №2

Similar questions

Processing of an array received via AJAX and passed to a PHP script, inside a separate function in a different file

Ways to show dropdown menu link exclusively on mobile browsers and not on desktop browsers

Unlock the Power of Angular: Leveraging ViewEncapsulation.Native to Access HTML Elements

javascript strange behavior

Error encountered: Unable to assign onClick property to null object

Generating values in a loop - mastering the art of creating data points

"Choosing a div element using nth-child() method: a step-by-step guide

Insert image using AJAX

Fluid active tabs are causing alignment issues with CSS triangles

Enhance link with dynamic content using an AJAX call

Positioning a Material UI Menu item underneath its parent element using CSS styling

Troubleshooting a mapping problem with CSS elements

What is the method for ensuring that the delete functionality is displayed within the same row?

When I press the button, a model popup will display the complete information

Exploring the differences: Bootstrap-Vue versus Bootstrap 4

Guide to adding checkbox IDs and inserting them into a textarea

Unable to supersede the current CSS styling

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Variables are losing their way in the vast expanse of self-submitting

``Are there any thoughts on how to troubleshoot display problems specifically on mobile