FAQ Accordion Style not expandable and clickable

Question

I have been trying to make a copy of a FAQ Accordion style like this one here .

The problems are that the first question is collapsed and when I click on the other questions they wont open nor respond to any of my clicks. What should i do to make this correct? I believe something is wrong with my JQuery.

HTML CODE

<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
    <p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
    <p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
    <p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
    <p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
    <p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
    <p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
    <p>A: Via our <a href="report_file.html">report abuse</a> pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
    <p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>

CSS CODE

.accordion-header {
    font-size: 18px;
    background: #ebebeb;
    margin: 5px 0 0 0;
    padding: 14px;
    border: 1px solid #D8D8D8;
    cursor: pointer;
    color: #8E8E8E;
    text-align: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.active-header {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background: rgb(96, 168, 227);
    background-repeat: no-repeat;
    background-position: right 50%;
    color: white;
    text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
    background: url(images/inactive-header.gif) #fff;
    background-repeat: no-repeat;
    background-position: right 50%;
}
.inactive-header:hover {
    background: url(images/inactive-header.gif) #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
}
.accordion-content {
    display: none;
    padding: 18px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    text-align: left;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

JS CODE

$(document).ready(function () {
    'use strict';
    $('.nav').onePageNav({
        filter: ':not(.external)'
    });
});
jQuery(document).ready(function ($) {
    'use strict';
    $('.animated').appear(function () {
        var elem = $(this);
        var animation = elem.data('animation');
        if (!elem.hasClass('visible')) {
            var animationDelay = elem.data('animation-delay');
            if (animationDelay) {
                setTimeout(function () {
                    elem.addClass(animation + " visible");
                }, animationDelay);
            } else {
                elem.addClass(animation + " visible");
            }
        }
    });
});
$(document).ready(function () {
    'use strict';
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});

function showUploaderPopup() {
    jQuery('#fileUploadWrapper').modal('show', {
        backdrop: 'static'
    }).on('shown.bs.modal');
}

function createSlowGauge() {
    var opts = {
        lines: 12,
        angle: 0,
        lineWidth: 0.25,
        pointer: {
            length: 0.9,
            strokeWidth: 0.04,
            color: '#000000'
        },
        limitMax: 'true',
        colorStart: '#CF0808',
        colorStop: '#DA0202',
        strokeColor: '#E0E0E0',
        generateGradient: true
    };
    var target = document.getElementById('canvas-slow');
    var gauge = new Gauge(target).setOptions(opts);
    gauge.maxValue = 100;
    gauge.animationSpeed = 128;
    gauge.set(9);
}
$(document).ready(function () {
    $('.accordion-header').toggleClass('inactive-header');
    $('.accordion-header').click(function () {
        if ($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        } else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });
    return false;
});

function createFastGauge() {
    var opts = {
        lines: 12,
        angle: 0,
        lineWidth: 0.25,
        pointer: {
            length: 0.9,
            strokeWidth: 0.04,
            color: '#000000'
        },
        limitMax: 'true',
        percentColors: [
            [0.0, "#000000"],
            [0.50, "#cc0000"],
            [1.0, "#00cc00"]
        ],
        strokeColor: '#E0E0E0',
        generateGradient: true
    };
    var target = document.getElementById('canvas-fast');
    var gauge = new Gauge(target).setOptions(opts);
    gauge.maxValue = 100;
    gauge.animationSpeed = 128;
    gauge.set(100);
}! function ($) {
    $(function () {
        var $root = $('html, body');
        $('.smooth-anchor-link').click(function () {
            var href = $.attr(this, 'href');
            $root.animate({
                scrollTop: $(href).offset().top
            }, 500, function () {
                window.location.hash = href;
            });
            return false;
        });
    })
}(window.jQuery);

Here is the JSFiddle example, you may try to update it if you know the correct solution :)

PS: I know there are other similar questions here but I tried all of them none solved my problem.

Answer 1

Your code throws an error Uncaught TypeError: undefined is not a function which is caused by onePageNav() and appear() , these are not official javascript/jQuery functions. If you copied them from somewhere else, they are most likely external plugin functions.

Simply removing these 2 functions from your javascript fixes your clicking issue. JSFiddle link

Please note that you also do not need to use $(document).ready(function () in JSFiddle, it does this automatically.

When trying to replicate something, try to build it yourself from scratch. You will not learn anything from just copying the entire thing. Try to write your own functions instead, so you can learn how everything works. The jQuery documentations should help.

If you are interested in learning how code in Javascript and/or jQuery, try the following sites:

• CodeAcademy - General knowledge basics of several languages.
• Tuts+ - Tutorials on more specific topics.
• KhanAcademy
• Mozilla Docs