locked
Open / Close elements using Javascript RRS feed

  • Question

  • User662762443 posted

    I have the following problem, I have registration menus in my page, and the idea would be to click on name, could load on the side a panel containing the data that I would register, but I do not know how to call this event in javascript. And after the name tab, when I click on City I would call a new panel next and hide the structure of the namespace panel, how could I do it?

    It would be a page in html with the side menus. How to make a div appear and hide it? This is my menu div:

    <ul class = "collapse submenu-items in" id = "menu-alter-4302">
    
                                            <li>
                                                <a href="/bank/index" class=ativo>
                                                    <i class = "fa fa-circle-o"> </ i> Bank
                                                </a>
                                            </ li>
    </ul>

    Tuesday, January 15, 2019 12:29 PM

Answers

  • User283571144 posted

    Hi rtaVix,

    I have registration menus in my page, and the idea would be to click on name, could load on the side a panel containing the data that I would register, but I do not know how to call this event in javascript. And after the name tab, when I click on City I would call a new panel next and hide the structure of the namespace panel, how could I do it?

    According to your description, I suggest you could try to use bootstarp model popup to achieve your requirement, you could use jquery to set the popup hide or show.

    If you want to get the data according to the username, I suggest you could use jquery ajax to acheive your requirement.

    If I misunderstand your requirement, please feel free to let me know.

    Here is a basic demo, I suggest you could refer to below codes:

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
        <script src="../Scripts/jquery-1.10.2.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript" ></script>
        <script>
        $(document).ready(function(){
            $("#a1").click(function () {
                $("#div1").css("display", "inline-block");
                $("#div2").css("display","none");
            });
    
            $("#a2").click(function () {
                $("#div2").css("display", "inline-block");
                $("#div1").css("display", "none");
    
            });
        });
        </script>
    
    
        <div>
        <ul class="collapse submenu-items in" id="menu-alter-4302">
            <li><a id="a1" >name</a></li>
            <li><a id="a2" >city</a></li>      
        </ul>
       </div>
    
    
        <div id="div1" class="panel panel-default" style="display:none" >
            <div class="panel-heading">
            </div>
            <div class="panel-body">
                Registration information
            </div>
        </div>
    
    
        <div id="div2" class="panel panel-default" style="display:none" >
            <div class="panel-heading">
            </div>
            <div class="panel-body">
                city information
            </div>
        </div>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 16, 2019 8:34 AM