Question posted in
You can find the official documentation here.

Ajax jQuery Accordion Show First 5 Elements On Page – Jquery ajax

What I would like to do is Ajax the top five accordion elements from a page. I’m having trouble keeping the existing content in accordion format after loading it via ajax. Would it be possible to just pull the top five using .load()? How should I go about this problem?

Page I would like to ajax from:

<div id="main" class="accordians">
    <h3>Collapsible Group Item #1</h3>
    <div>
        <p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #2</h3>
    <div>
        <p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #3</h3>
    <div>
        <p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #4</h3>
    <div>
        <p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #5</h3>
    <div>
        <p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
    </div>
    <h3>Collapsible Group Item #6</h3>
    <div>
        <p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
    </div>
</div>

Accordion Looks like the following

Second page will be pulling the accordian via Ajax:

<div id="load-top-five">#load top five accordions into here.</div>
<script>
   // would like to combine the functionality to only return the top five.
   $('#load-top-five').load('https://www.example.com #main'); // this loads the page but doesn't keep it in the correct format.
   $('#load-top-five').find('#main:lt(5)').each(function(){...} // I would like to do some logic like this to only render the top 5.
<script>
Tags:

2

Answers


  1. 0

    you can do it this way

    in the file html

    <div id="main" class="accordians">
    <div class="card-acordeon">
        <div id="collapse1"> 
            <h3 class="title">header 1</h3>
        </div>
        <div class="acordeon" id="acordeon1">
            <p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse2"> 
            <h3 class="title">header 2</h3>
        </div>
        <div class="acordeon" id="acordeon2">
            <p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse3"> 
            <h3 class="title">header 3</h3>
        </div>
        <div class="acordeon" id="acordeon3">
            <p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse4"> 
            <h3 class="title">header 4</h3>
        </div>
        <div class="acordeon" id="acordeon4">
            <p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse5"> 
            <h3 class="title">header 5</h3>
        </div>
        <div class="acordeon" id="acordeon5">
            <p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse6"> 
            <h3 class="title">header 6</h3>
        </div>
        <div class="acordeon" id="acordeon6">
            <p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse7"> 
            <h3 class="title">header 7</h3>
        </div>
        <div class="acordeon" id="acordeon7">
            <p>This is section 7. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
    <div class="card-acordeon">
        <div id="collapse8"> 
            <h3 class="title">header 8</h3>
        </div>
        <div class="acordeon" id="acordeon8">
            <p>This is section 8. Place your content here in paragraphs or use div elements etc.</p>
        </div>
    </div>
</div>

    in the file css

    *{
            padding: 0;
            margin: 0;
        }

        .accordians{
            height: auto;
            width: 80%;
            padding-top: 4%;
            margin: auto;
        }

        .card-acordeon{
            width: 100%;
            height: auto;
            cursor: pointer;
            padding-left: 2%;
            padding-top: 1%;
            padding-bottom: 1%;
            border-bottom: 1px solid rgb(121, 121, 121);
            background-color: gray;
        }

        .card-acordeon div:nth-child(2){
            display: none;
        }

        .card-acordeon:hover{
            opacity: 0.9;
        }

        .title{
            color: white;
            font-size: 20px;
            font-weight: bolder;
            height: 100%;
            width: 100%;
        }
        .acordeon{
            margin-top: 2%;
            padding-left: 1%;
            padding-right: 1%;
        }

    in the file js

    $(document).ready(function () {
        console.log("hay "+$(".card-acordeon").length+" div con la clase card-acordeon");
        for(var i=0; i<$(".card-acordeon").length; i++){
            let pos=i+1;
            if(i<5){
                $("#acordeon"+pos).css('display','block');
            }
            $("#collapse"+pos).click(Collapsediv);
        }
    });

    var idbefor=0;
    var id=0;

    function Collapsediv(){
        id=this.id.substring(this.id.length-1,this.id.length);
        $("#acordeon"+id).css('display','block');
        if(idbefor!=id){
            $("#acordeon"+idbefor).css('display','none');
        }
        else{
            $("#acordeon"+id).css('display','block');
        }
        idbefor=this.id.substring(this.id.length-1,this.id.length);
    }
    Login or Signup to reply.
  2. 0

    First, you will have to load the element onto the page. The accordion will only format after the data is done loading.

    $(function() {
    $('#load-into-new-accordion').load('https://www.someurl.com #accordion_data');
});

// create a function for the accordion.
function loadAccordionFormating() {
  $('#load-into-new-accordion').accordion({});
}

// after the data is done loading apply the formatting.
window.onload = function() {
   loadAccordionFormating();
};

    To hide the elements you can use the ui-id-1, ui-id-2, etc which you just create a simple for loop.

    for(var i=1;i<15; i++) {
    $(`ui-id-${i}`).hide();
}

    In addition, since this is slow you can also by default hide elements with css and just show them with the same method as above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search