CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
user4093955
user4093955

Reputation:

<div> not displaying after clicking the button

I was expecting that after hitting the button, the <div id="dni"> would show up, however nothing is changing. What's wrong?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script>
            function show_dni(){
                $("#dni").toggle();
            }
        </script>

    </head>
    <body>
        <div class="container">
            <br><br>
            <button class="btn btn-primary" onclick="show_dni()">Ver cliente</button>
            <div id="dni" class="hidden">
                DNI: <input type="text" name="id">
            </div>
        </div>
    </body>
</html>

Oddly, this same code works as intended on Fidd http://jsfiddle.net/wmL1zt7L/

Upvotes: 0

Views: 42

Answers (2)

user4093955
user4093955

Reputation:

Instead of using jquery and Bootstrap's hidden class, I managed to get the same effect using Bootstrap's collapse class.

<div class="container">
    <br><br>
    <button class="btn btn-primary" data-toggle="collapse" data-target="#dni">Ver cliente</button>
    <div id="dni" class="collapse">
        DNI: <input type="text" name="id">
    </div>
</div>

Upvotes: 0

Sagi Levi
Sagi Levi

Reputation: 305

Hey here is an example of how to use it. https://jsfiddle.net/se4er462/

I think that in your class you used visibility property instead of display. while toggle change the display between none to block, and vice verse

The correct class:

.hidden{
    display:none;
}

Edit / Addition:

The bootstrap hidden class define the element visibilty as

.hidden{
   display:none!important;
}

Therefore, the toggle functionality won't be able to change it. If the display was without the important, the toggle would've worked.

Upvotes: 2

Related Questions