HTML & CSS HTML accordion with flex

[richarddunnebsc]

I have this


and this when Department 1 button is clicked



The CSS positioning is using absolute, however I want to change this to flex which I'm new at.

This is my CSS

#Departments{ margin: 10% 10% 10% 10%; }
.collapsible{margin: 0 0 0 0; width: 100%; height: 50px;}
.content{display: flex; height: 50px; width: 100%; flex-direction: row; justify-content: space-around;}
.name{height: 50px; width: 33%;}
.countries{height: 50px; width: 33%;}

this is how it renders



which is not the same obviously.

This is the HTML

 <div id="Departments">
        <button type="button" class="collapsible">Department 1<span style="float: right;">+</span></button>
        <div class="content">
            <div class="name">
                <input type="text" name="Name" placeholder="Employee Name" style="width: 100%; ">
            </div>
            <div class="countries">
                <select name="Country" id="Country" style="width: 50%; ">
                    <option selected>Country</option>
                    <option>Australia</option>
                    <option>Canada</option>
                </select>
            </div>
        </div>
        <button type="button" class="collapsible">Department 2<span style="float: right;">+</span></button>
        <div class="content">
            <table>
                <tr>
                    <td style="width: 45%;">
                        <input type="text" name="Name" placeholder="Employee Name" style="width: 100%;">
                    </td>
                    <td style="width: 50%;">
                        <input type="email" name="Email" placeholder="Employee Email" style="width: 100%;">
                    </td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">Add</button>
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td style="width: 45%;">Employee Name</td>
                    <td style="width: 50%;">Employee Email</td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">X</button>
                    </td>
                </tr>
            </table>
        </div>
        <button type="button" class="collapsible">Department 3<span style="float: right;">+</span></button>
        <div class="content">
            <table>
                <tr>
                    <td style="width: 45%;">
                        <input type="text" name="Name" placeholder="Employee Name" style="width: 100%;">
                    </td>
                    <td style="width: 50%;">
                        <input type="email" name="Email" placeholder="Employee Email" style="width: 100%;">
                    </td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">Add</button>
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td style="width: 45%;">Employee Name</td>
                    <td style="width: 50%;">Employee Email</td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">X</button>
                    </td>
                </tr>
            </table>
        </div>
        <button type="button" class="collapsible">Department 4<span style="float: right;">+</span></button>
        <div class="content">
            <table>
                <tr>
                    <td style="width: 45%;">
                        <input type="text" name="Name" placeholder="Employee Name" style="width: 100%;">
                    </td>
                    <td style="width: 50%;">
                        <input type="email" name="Email" placeholder="Employee Email" style="width: 100%;">
                    </td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">Add</button>
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td style="width: 45%;">Employee Name</td>
                    <td style="width: 50%;">Employee Email</td>
                    <td style="width: 5%;">
                        <button type="submit" style="width: 100%;">X</button>
                    </td>
                </tr>
            </table>
        </div>

Any help appreciated.
    </div>

 

[Krygore]

I'm not sure what it is exactly that you are trying to accomplish here....

Are you trying to get the input fields to be lined up with less space underneath them? Are you trying to make multiple columns of input fields?

If you are looking for insight on CSS Flex in general, check out https://www.w3schools.com/cssref/css3_pr_flex.asp and https://www.w3schools.com/cssref/pr_class_display.asp for info on CSS display: flex; and the flex property.

 

[richarddunnebsc]

I want to replace absolute positioning with flex which I am new to. I want two columns of inputs, I want them side by side, not one under the other. I have flex-direction set to row, but as you can see, the input are not lining up in a row. Don't know why.

 

[Krygore]

.content{display: flex; height: 50px; width: 100%; flex-direction: row; justify-content: space-around;}

Thank you for the clarification having the display set to flex with the flex-direction row AND justify content is where I believe you are having an issue.

Justify-content is another property that can be set within the the flex display, but can't be used with flex-direction.

This page goes into further details for each one. https://www.w3schools.com/css/css3_flexbox_container.asp

I believe if you remove the justify content from the CSS code, you should be able to achieve your end goal. Let me know

PS. Are you using any bootstrap?

 

[richarddunnebsc]

No, not using bootstrap. This is another form (WIP)


and the CSS

#Departments{ margin: 10% 10% 10% 10%;}
.collapsible{margin: 0 0 0 0; width: 100%; height: 50px;}
.content{width: 100%; }
.name{margin-left: 15%; margin-top: 50px;}
.country{visibility: visible; width: 10%;}

margin has no affect.
I have tried using this in the container to position items centrally

display: flex;
justify-content: center;

but it had no affect at all.
Also it seems flex doesn't work (well or at all) with multiple div's, just a container. Each input had it's own div, they wouldn't line up horizontally. I got rid of them, now inputs do line up horizontally.

 

[Krygore]

Best advice I can offer is to remove the inputs from seperate divs. Add them to the same div and put their classes in the appropriate tags, (i.e. class="name" would go into the <input> tag and class="countries" would be within the <select> tag. Then set your display to flex-row with a margin of auto.

If that doesn't help, you may want to review the accordion HowTo at https://www.w3schools.com/howto/howto_js_accordion.asp to get a better understanding of the layout of accordions. Then use the recent links I posted to see how you can tie in display flex functions.

 

[richarddunnebsc]

I have been looking at flex tutorials and have not figured out how to do this:
5 inputs mix of text and selects, all fit on one row, but I want 3 on one row with two on the next, all space-evenly
I have two containers, one for each row, but I want them all in the same container. Is there a way to limit items per row?