Dropdown Boxes Not Responding

All of a sudden, these 3 dropdown boxes I have on my home page stopped responding. I feel like I'm going crazy and just not able to figure it out. Code is below.

I have 3 boxes that contain tables that are revealed on click. However, they are not revealing. They should look like this when clicked.

The website is thrivematching.com if you need to check it out. It was working not too long ago, so not sure what happened. The hamburger menu (on mobile) also stop working. Seems like a joint issue, but not sure?

HTML for 3 Dropdown Tables:

<div class="accordion mt-5" id="scenarios" role="tablist" aria-multiselectable="true">

                <div class="panel-primary mb-3">

                    <div class="text-white" role="tab" id="studentHeading">

                        <h4>

                            <button class="w-100 p-4 btn-primary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#student" aria-expanded="false" aria-controls="student">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Student Loan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="student" class="rounded panel-collapse collapse" role="tabpanel" aria-labelledby="studentHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee retirement plan and <strong>$3,000</strong> to student loans annually.</h5>

                        <div class="mr-3">

                            <table class="table justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Student Loan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-secondary mb-3">

                    <div class="text-white" role="tab" id="retirementHeading">

                        <h4>

                            <button class="w-100 p-4 btn-secondary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#retirement" aria-expanded="false" aria-controls="retirement">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Retirement Plan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="retirement" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="retirementHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee student loans and <strong>$3,000</strong> to retirement plan annually.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Retirement Plan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-support mb-3">

                    <div class="text-white" role="tab" id="splitHeading">

                        <h4>

                            <button class="w-100 p-4 btn-support text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#split" aria-expanded="false" aria-controls="split">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>Retirement Plan/Student Loan Split</span>

                                    </div><div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="split" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="splitHeading">

                        <h5 class="text-center pt-5 mx-3"> Employer contributes <strong>$1,800</strong> to employee retirement plan and <strong>$1,200</strong> to student loans annually. Retirement plan contributions must be matched before student loan contributions can be applied.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">Retirement Plan/Student Loan Split</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>3% ($150/month)</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>3% ($150/month)</td>

                                        <td>2% ($100/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

asked Nov 21 '18 at 17:02

sebo620

I tried your code out using Bootstrap 4 and it seemed to work just fine. Are you using Bootstrap 4? The link to your site doesn't work so I couldn't investigate further.

– MichaelvE
Nov 21 '18 at 20:00

@MichaelvE I am not using Bootstrap 4. The site is being directed to a new IP address. Once that is settled and loads, I will test again. I might reach back out and see if we can get this figured out with any advice from you. Stay tuned and thank you!

– sebo620
Nov 28 '18 at 19:57

@MichaelvE the site is up and live again (thrivematching.com) if you can check that out and shed any insight on why the hamburger menu, dropdown boxes in the screenshot, etc. isn't responding, it would be much appreciated!

– sebo620
Nov 30 '18 at 22:25

Your site does not appear to use Bootstrap as I thought it might do, but it does use a library that seems to be based on Bootstrap because it is filled with the same class names that Bootstrap uses. It's difficult to find the source of your problem, but we can make a start. For starters, the site is not finding a JavaScript file called youbenefited.com/wp-content/cache/min/1/… Your problem might be solved by simply correcting the path so that your page can find this JS file. Start with that, and then let's see what happens once that is corrected.

– MichaelvE
Dec 1 '18 at 8:30

Perfect! This site is based off of another and has JS linked in it. Looks like that link changed in the original. So I went to the new JS source, copy/pasted into my own .js file and put it in my root file so it can't be changed. Thanks for taking a look! Saved me a headache!

– sebo620
Dec 2 '18 at 16:43

add a comment |

All of a sudden, these 3 dropdown boxes I have on my home page stopped responding. I feel like I'm going crazy and just not able to figure it out. Code is below.

I have 3 boxes that contain tables that are revealed on click. However, they are not revealing. They should look like this when clicked.

HTML for 3 Dropdown Tables:

<div class="accordion mt-5" id="scenarios" role="tablist" aria-multiselectable="true">

                <div class="panel-primary mb-3">

                    <div class="text-white" role="tab" id="studentHeading">

                        <h4>

                            <button class="w-100 p-4 btn-primary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#student" aria-expanded="false" aria-controls="student">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Student Loan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="student" class="rounded panel-collapse collapse" role="tabpanel" aria-labelledby="studentHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee retirement plan and <strong>$3,000</strong> to student loans annually.</h5>

                        <div class="mr-3">

                            <table class="table justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Student Loan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-secondary mb-3">

                    <div class="text-white" role="tab" id="retirementHeading">

                        <h4>

                            <button class="w-100 p-4 btn-secondary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#retirement" aria-expanded="false" aria-controls="retirement">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Retirement Plan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="retirement" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="retirementHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee student loans and <strong>$3,000</strong> to retirement plan annually.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Retirement Plan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-support mb-3">

                    <div class="text-white" role="tab" id="splitHeading">

                        <h4>

                            <button class="w-100 p-4 btn-support text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#split" aria-expanded="false" aria-controls="split">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>Retirement Plan/Student Loan Split</span>

                                    </div><div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="split" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="splitHeading">

                        <h5 class="text-center pt-5 mx-3"> Employer contributes <strong>$1,800</strong> to employee retirement plan and <strong>$1,200</strong> to student loans annually. Retirement plan contributions must be matched before student loan contributions can be applied.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">Retirement Plan/Student Loan Split</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>3% ($150/month)</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>3% ($150/month)</td>

                                        <td>2% ($100/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

asked Nov 21 '18 at 17:02

sebo620

I tried your code out using Bootstrap 4 and it seemed to work just fine. Are you using Bootstrap 4? The link to your site doesn't work so I couldn't investigate further.

– MichaelvE
Nov 21 '18 at 20:00

@MichaelvE I am not using Bootstrap 4. The site is being directed to a new IP address. Once that is settled and loads, I will test again. I might reach back out and see if we can get this figured out with any advice from you. Stay tuned and thank you!

– sebo620
Nov 28 '18 at 19:57

@MichaelvE the site is up and live again (thrivematching.com) if you can check that out and shed any insight on why the hamburger menu, dropdown boxes in the screenshot, etc. isn't responding, it would be much appreciated!

– sebo620
Nov 30 '18 at 22:25

Your site does not appear to use Bootstrap as I thought it might do, but it does use a library that seems to be based on Bootstrap because it is filled with the same class names that Bootstrap uses. It's difficult to find the source of your problem, but we can make a start. For starters, the site is not finding a JavaScript file called youbenefited.com/wp-content/cache/min/1/… Your problem might be solved by simply correcting the path so that your page can find this JS file. Start with that, and then let's see what happens once that is corrected.

– MichaelvE
Dec 1 '18 at 8:30

Perfect! This site is based off of another and has JS linked in it. Looks like that link changed in the original. So I went to the new JS source, copy/pasted into my own .js file and put it in my root file so it can't be changed. Thanks for taking a look! Saved me a headache!

– sebo620
Dec 2 '18 at 16:43

add a comment |

All of a sudden, these 3 dropdown boxes I have on my home page stopped responding. I feel like I'm going crazy and just not able to figure it out. Code is below.

I have 3 boxes that contain tables that are revealed on click. However, they are not revealing. They should look like this when clicked.

HTML for 3 Dropdown Tables:

<div class="accordion mt-5" id="scenarios" role="tablist" aria-multiselectable="true">

                <div class="panel-primary mb-3">

                    <div class="text-white" role="tab" id="studentHeading">

                        <h4>

                            <button class="w-100 p-4 btn-primary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#student" aria-expanded="false" aria-controls="student">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Student Loan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="student" class="rounded panel-collapse collapse" role="tabpanel" aria-labelledby="studentHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee retirement plan and <strong>$3,000</strong> to student loans annually.</h5>

                        <div class="mr-3">

                            <table class="table justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Student Loan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-secondary mb-3">

                    <div class="text-white" role="tab" id="retirementHeading">

                        <h4>

                            <button class="w-100 p-4 btn-secondary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#retirement" aria-expanded="false" aria-controls="retirement">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Retirement Plan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="retirement" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="retirementHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee student loans and <strong>$3,000</strong> to retirement plan annually.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Retirement Plan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-support mb-3">

                    <div class="text-white" role="tab" id="splitHeading">

                        <h4>

                            <button class="w-100 p-4 btn-support text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#split" aria-expanded="false" aria-controls="split">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>Retirement Plan/Student Loan Split</span>

                                    </div><div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="split" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="splitHeading">

                        <h5 class="text-center pt-5 mx-3"> Employer contributes <strong>$1,800</strong> to employee retirement plan and <strong>$1,200</strong> to student loans annually. Retirement plan contributions must be matched before student loan contributions can be applied.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">Retirement Plan/Student Loan Split</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>3% ($150/month)</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>3% ($150/month)</td>

                                        <td>2% ($100/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

asked Nov 21 '18 at 17:02

sebo620

All of a sudden, these 3 dropdown boxes I have on my home page stopped responding. I feel like I'm going crazy and just not able to figure it out. Code is below.

I have 3 boxes that contain tables that are revealed on click. However, they are not revealing. They should look like this when clicked.

HTML for 3 Dropdown Tables:

<div class="accordion mt-5" id="scenarios" role="tablist" aria-multiselectable="true">

                <div class="panel-primary mb-3">

                    <div class="text-white" role="tab" id="studentHeading">

                        <h4>

                            <button class="w-100 p-4 btn-primary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#student" aria-expanded="false" aria-controls="student">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Student Loan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="student" class="rounded panel-collapse collapse" role="tabpanel" aria-labelledby="studentHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee retirement plan and <strong>$3,000</strong> to student loans annually.</h5>

                        <div class="mr-3">

                            <table class="table justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Student Loan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>0%</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-secondary mb-3">

                    <div class="text-white" role="tab" id="retirementHeading">

                        <h4>

                            <button class="w-100 p-4 btn-secondary text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#retirement" aria-expanded="false" aria-controls="retirement">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>100% Retirement Plan Contribution</span>

                                    </div>

                                    <div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="retirement" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="retirementHeading">

                        <h5 class="text-center pt-5 mx-3">Employer contributes <strong>$0</strong> to employee student loans and <strong>$3,000</strong> to retirement plan annually.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">100% Retirement Plan Contribution</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>5% ($250/month)</td>

                                        <td>0%</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <div class="panel-support mb-3">

                    <div class="text-white" role="tab" id="splitHeading">

                        <h4>

                            <button class="w-100 p-4 btn-support text-center" data-toggle="collapse" data-parent="#scenarios" data-target="#split" aria-expanded="false" aria-controls="split">

                                <div class="d-flex justify-content-between">

                                    <div class="col-10 text-center text-sm-left">

                                        <span>Retirement Plan/Student Loan Split</span>

                                    </div><div class="col-2 h-100 my-auto">

                                        <span class="symbol rounded-circle d-block ml-auto"></span>

                                    </div>

                                </div>

                            </button>

                        </h4>

                    </div>

                    <div id="split" class="panel-collapse collapse rounded" role="tabpanel" aria-labelledby="splitHeading">

                        <h5 class="text-center pt-5 mx-3"> Employer contributes <strong>$1,800</strong> to employee retirement plan and <strong>$1,200</strong> to student loans annually. Retirement plan contributions must be matched before student loan contributions can be applied.</h5>

                        <div class="mr-3">

                            <table class="table w-100 justify-content-center text-center text-white round-table mt-5 mb-2 table-responsive-sm">

                                <caption>

                                    <span class="sr-only">Retirement Plan/Student Loan Split</span>

                                </caption>

                                <thead>

                                    <tr>

                                        <td class="pr-4"></td>

                                        <th scope="col">Retirement Plan</th>

                                        <th scope="col">Student Loan</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <th scope="row" class="pr-4">Employee Contributes</th>

                                        <td>3% ($150/month)</td>

                                        <td>5% ($250/month)</td>

                                    </tr>

                                    <tr>

                                        <th scope="row" class="pr-4">Employer Match</th>

                                        <td>3% ($150/month)</td>

                                        <td>2% ($100/month)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

html responsive-design dropdownbox

asked Nov 21 '18 at 17:02

sebo620

asked Nov 21 '18 at 17:02

sebo620

asked Nov 21 '18 at 17:02

sebo620

asked Nov 21 '18 at 17:02

sebo620

asked Nov 21 '18 at 17:02

sebo620

I tried your code out using Bootstrap 4 and it seemed to work just fine. Are you using Bootstrap 4? The link to your site doesn't work so I couldn't investigate further.

– MichaelvE
Nov 21 '18 at 20:00

@MichaelvE I am not using Bootstrap 4. The site is being directed to a new IP address. Once that is settled and loads, I will test again. I might reach back out and see if we can get this figured out with any advice from you. Stay tuned and thank you!

– sebo620
Nov 28 '18 at 19:57

@MichaelvE the site is up and live again (thrivematching.com) if you can check that out and shed any insight on why the hamburger menu, dropdown boxes in the screenshot, etc. isn't responding, it would be much appreciated!

– sebo620
Nov 30 '18 at 22:25

Your site does not appear to use Bootstrap as I thought it might do, but it does use a library that seems to be based on Bootstrap because it is filled with the same class names that Bootstrap uses. It's difficult to find the source of your problem, but we can make a start. For starters, the site is not finding a JavaScript file called youbenefited.com/wp-content/cache/min/1/… Your problem might be solved by simply correcting the path so that your page can find this JS file. Start with that, and then let's see what happens once that is corrected.

– MichaelvE
Dec 1 '18 at 8:30

Perfect! This site is based off of another and has JS linked in it. Looks like that link changed in the original. So I went to the new JS source, copy/pasted into my own .js file and put it in my root file so it can't be changed. Thanks for taking a look! Saved me a headache!

– sebo620
Dec 2 '18 at 16:43

add a comment |

I tried your code out using Bootstrap 4 and it seemed to work just fine. Are you using Bootstrap 4? The link to your site doesn't work so I couldn't investigate further.

– MichaelvE
Nov 21 '18 at 20:00

@MichaelvE I am not using Bootstrap 4. The site is being directed to a new IP address. Once that is settled and loads, I will test again. I might reach back out and see if we can get this figured out with any advice from you. Stay tuned and thank you!

– sebo620
Nov 28 '18 at 19:57

@MichaelvE the site is up and live again (thrivematching.com) if you can check that out and shed any insight on why the hamburger menu, dropdown boxes in the screenshot, etc. isn't responding, it would be much appreciated!

– sebo620
Nov 30 '18 at 22:25

Your site does not appear to use Bootstrap as I thought it might do, but it does use a library that seems to be based on Bootstrap because it is filled with the same class names that Bootstrap uses. It's difficult to find the source of your problem, but we can make a start. For starters, the site is not finding a JavaScript file called youbenefited.com/wp-content/cache/min/1/… Your problem might be solved by simply correcting the path so that your page can find this JS file. Start with that, and then let's see what happens once that is corrected.

– MichaelvE
Dec 1 '18 at 8:30

Perfect! This site is based off of another and has JS linked in it. Looks like that link changed in the original. So I went to the new JS source, copy/pasted into my own .js file and put it in my root file so it can't be changed. Thanks for taking a look! Saved me a headache!

– sebo620
Dec 2 '18 at 16:43

I tried your code out using Bootstrap 4 and it seemed to work just fine. Are you using Bootstrap 4? The link to your site doesn't work so I couldn't investigate further.

– MichaelvE
Nov 21 '18 at 20:00

@MichaelvE I am not using Bootstrap 4. The site is being directed to a new IP address. Once that is settled and loads, I will test again. I might reach back out and see if we can get this figured out with any advice from you. Stay tuned and thank you!

– sebo620
Nov 28 '18 at 19:57

@MichaelvE the site is up and live again (thrivematching.com) if you can check that out and shed any insight on why the hamburger menu, dropdown boxes in the screenshot, etc. isn't responding, it would be much appreciated!

– sebo620
Nov 30 '18 at 22:25

Your site does not appear to use Bootstrap as I thought it might do, but it does use a library that seems to be based on Bootstrap because it is filled with the same class names that Bootstrap uses. It's difficult to find the source of your problem, but we can make a start. For starters, the site is not finding a JavaScript file called youbenefited.com/wp-content/cache/min/1/… Your problem might be solved by simply correcting the path so that your page can find this JS file. Start with that, and then let's see what happens once that is corrected.

– MichaelvE
Dec 1 '18 at 8:30

Perfect! This site is based off of another and has JS linked in it. Looks like that link changed in the original. So I went to the new JS source, copy/pasted into my own .js file and put it in my root file so it can't be changed. Thanks for taking a look! Saved me a headache!

– sebo620
Dec 2 '18 at 16:43

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417168%2fdropdown-boxes-not-responding%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk