I want to put out JQuery's accordion menu so that I can ride it instead of slide.

I made an accordion for the sidebar.
However, if you display the accordion as it is, the table in the body (the one that says row 1 row 2) will shift to the right.

Instead of sliding to the right, I would like to display it so that it can be on a table with columns 1 and 2 written on it.
What should I do?

This is a postscript.
I'm sorry, but I don't want you to see row 1 row 2 below, so I want to paint out the whole area of the accordion.

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>HorizontalAccordion</title>

        <script src="jquery.js"></script>

        <script>
            function accodation() {
                $('#acodion').animate({
                    width: 'toggle'
                }, 'normal');

            }
        </script>

        <style>
            .sidemenu {
              float:left;
              cursor —pointer;
            }

            .vertical{
              writing-mode —tb-rl;
              direction:ltr;
              float:left;
              cursor —pointer;
              background-color:#00ff00;
             }

            .HiddenItem
            {
                display: none;
                float:left;
            }
        </style>


    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12col-md-offset-0">
                    <br of >
                </div>
            </div>
        </div>

        <form>

            <span id='acodion' class="HiddenItem">
                Menu 1-1<br/>
                Menu 1-2<br/>
                Menu 1-3<br/>
            </span>

            <span id='sidemenu' onclick="acodion()">
                <span class='vertical'> accordion menu</span>
           </span>

       <div class="container">
            <div class="row">

                <div class="col-md-11col-md-offset-0">
                <table>
                    <tr>
                        <td>Column 1</td>>Column 2>/td>Column 3>/td>
                    </tr>
                </table>
                </div>
            </div>
       </div>

        </form>

    </body>
    </html>

javascript html jquery css

2022-09-30 21:14

1 Answers

If you do the following, you will get on top.

.HiddenItem
        {
            display: none;
            // float:left;
            position:absolute;
        }

2022-09-30 21:14

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656