locked
JQuery accordion icon behind text RRS feed

  • Question

  • User-1651604128 posted

    Hi, I am using JQuery accordion control in mvc web app from this link:

    https://jqueryui.com/accordion/#default

    It works OK except the icon displays behind section text,

    I found this link to fix it: https://stackoverflow.com/questions/12761986/jquery-accordion-icon-behind-text

    That problem is fixed, but it creates a new problem - the selected section text changed to different background with a bolded dark blue rectangle which is not what I want it.

    I think it is caused by the bootstrap default .css, can anybody help me to resolve it?

    Basically , just to add .css to the following codes to overwrite the default bootstrap css.

    <div id="accordion"> <h3><a href="#">test</a></h3> <div>bla bla bla</div> </div>

    By the way, I am using Visual Studio 2017 enterprise version, it is MVC web project.

    Thanks a lot,   

    Monday, October 21, 2019 1:57 PM

Answers

All replies

  • User475983607 posted

    Peter, you should use a Bootstrap accordion.   jQuery UI and Bootstrap are not totally compatible. 

    https://getbootstrap.com/docs/4.3/components/collapse/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 21, 2019 2:08 PM
  • User-17257777 posted

    Hi Peter,

    It's not the bootstrap default css. It is jquery ui default css. You can use f12 to check it.

    Since you don't want the dark blue background colour, you can overwrite the default css like this:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <style>
            .ui-state-active {
                border: 1px solid #cccccc;
                background: #ededed;
                font-weight: normal;
                color: #2b2b2b;
            }
    
                .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
                    color: #454545;
                    text-decoration: none;
                }
    
                .ui-state-active .ui-icon, .ui-button:active .ui-icon {
                    background-image: url(../../images/ui-icons_555555_256x240.png);
                }
        </style>
        <script>
            $(function () {
                $("#accordion").accordion({
                    active: false,
                    collapsible: true
                });
            });
        </script>
    
    </head>
    <body>
    
        <div id="accordion">
            <h3><a href="#">test</a></h3>
            <div>bla bla bla</div>
        </div>
    
        
    </body>
    </html>

    You should download the accordion image from the below link, and only need to include the images folder into your project.

    https://github.com/jquery/jquery-ui/tree/master/themes/base

    Test Result:

    Best Regards,

    Jiadong Meng

    Tuesday, October 22, 2019 6:02 AM
  • User-1651604128 posted

    Hi Peter,

    It's not the bootstrap default css. It is jquery ui default css. You can use f12 to check it.

    Since you don't want the dark blue background colour, you can overwrite the default css like this:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <style>
            .ui-state-active {
                border: 1px solid #cccccc;
                background: #ededed;
                font-weight: normal;
                color: #2b2b2b;
            }
    
                .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
                    color: #454545;
                    text-decoration: none;
                }
    
                .ui-state-active .ui-icon, .ui-button:active .ui-icon {
                    background-image: url(../../images/ui-icons_555555_256x240.png);
                }
        </style>
        <script>
            $(function () {
                $("#accordion").accordion({
                    active: false,
                    collapsible: true
                });
            });
        </script>
    
    </head>
    <body>
    
        <div id="accordion">
            <h3><a href="#">test</a></h3>
            <div>bla bla bla</div>
        </div>
    
        
    </body>
    </html>

    You should download the accordion image from the below link, and only need to include the images folder into your project.

    https://github.com/jquery/jquery-ui/tree/master/themes/base

    Test Result:

    Best Regards,

    Jiadong Meng

    Hi Jiadongm,

    Thanks a lot for your help with the example codes and emo, much appreciated,

    but after I tested it, in my case, I lost the bottom line of the selected accordion, I can see it shows in your demo, but not sure why I miss that.

    Also, the accordion text lost the highlight, ideally, it should show the highlight which indicates the current accordion is the current selected entry.

    since I am using icon in the accordion, I also lost the icon when an accordion is selected,

    any idea?

    Thanks

    Tuesday, October 22, 2019 8:46 PM