Question

I’m hoping someone might be able to help me move through an issue relating to loading content into a jQuery accordion onclick. Currently the accordion functionality is working and content is being loaded by AJAX, the issue is that I only want to load the content when the user clicks the specific accordion leaf rather than loading all content when the page loads.

HTML:

<div class="accordionButton">Origin</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_origin"></div>
    <div id="error_origin"></div>
    <script>
        $("#success_origin").load("content_origin.html", function(response, status, xhr) {
            if (status == "error_origin") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

<div class="accordionButton">Style</div>
<div class="accordionContent">
    <a href="javascript:void(0)" class="close">Close</a>
    <div id="success_style"></div>
    <div id="error_style"></div>
    <script>
        $("#success_style").load("content_style.html", function(response, status, xhr) {
            if (status == "error_style") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#error_style").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    </script>
</div>

And so on…

Accordion JavaScript:

$(document).ready(function() { 
    $('.close').click(function() {
        $('.close').addClass('hide');
        $('.accordionContent').slideUp('normal');
        $('.accordionButton').addClass('on');
        $('.accordionButton').removeClass('off');
        $('.showHeadline').slideDown('normal');     
    });

    $('.accordionButton').click(function() {
        $('.accordionButton').removeClass('on');
        $('.accordionButton').addClass('off');
        $('.showHeadline').slideUp('normal');
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {
            $('.close').addClass('show');
            $(this).addClass('on');
            $(this).next().slideDown('normal');
             } 
         });

    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');

    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    $('.accordionContent').hide();
});

I’m sure it’s something simple but I’d very much appreciate any help.

Thanks,
@rrfive

Answer 1

I’m not sure if this is what you are asking for, but if you are looking to load content_origin.html when they click the accordion button origin then you can just wrap your AJAX call with a jquery click handler and give each button an id e.g.

<script>
    $("#origin-button").click(function() {
         $("#success_origin").load("content_origin.html", function(response, status, xhr) {
              if (status == "error_origin") {
                  var msg = "Sorry but there was an error when loading the page's content: ";
                  $("#error_origin").html(msg + xhr.status + " " + xhr.statusText);
              }
          });
    });
</script>