htmljspaccordionjquery-ui-accordion

Group the content of accordion elements html


I am developing a website and part of it is a jsp that receives data from the database. This data is presented in an accordion. The problem is that the first value is repeated, so you would have to group the first value as the accordion button and the second as the content.

I have the jsp that receives from a servlet a list of objects.

The button of the accordion would be what is repeated and the content of that accordion would be

number 1
number 2
number 3
letter a
letter b
letter C
word hello

The accordion would be

>number
     1
     2
     3
>letter
     a
     b
     c
>word
     Hello

So far, the code I have is

    <c:forEach items = "${datas}" var = "data">

        <button class = "accordion"> ${data.getData()} </button>

        <c:forEach items = "${datas}" var = "dataint">
            <c:if test = "${data.getData() eq dataint.getData()}">

                <div class = "panel">
                    <p> ${dataint.getFin()} </p>
                </div>

            </c:if>

        </c:forEach>

    </c:forEach>

Accordion and data display are working properly, but it takes me to put as button of the accordion all the elements and content the first of the repetition.

what i'm looking to get:

enter image description here

what i get:

enter image description here


Solution

  • You can set one variable outside your <c:forEach.. loop and assign any random value to it . Then , inside each loop you can check if the current value and the variable values are not equal then only execute futher codes .

    So , your code will look like below :

    <c:set var="keys" value="somethings"/>
      <c:forEach items = "${datas}" var = "data">
        <c:if test="${keys ne data.getData()}">
            <c:set var="keys" value="${data.getData()}"/>
            <button class = "accordion"> ${data.getData()} </button>
                <div class = "panel">       
                    <c:forEach items = "${datas}" var = "dataint">
                        <c:if test = "${data.getData() eq dataint.getData()}">
                            <p> ${dataint.getFin()} </p>
                        </c:if>
                    </c:forEach>
                </div>
        </c:if>
     </c:forEach>
    

    (I am just showing logic here.This code is not tested..Sorry for any syntax error)