CODEWITHSUNDEEP
javascriptjqueryjsp
Abhi
Abhi

Reputation: 23

How to toggle div in jsp on some button click

My question is i am having two ul list under two different div.Let say showandhide.jsp is the file which need to load on some action.I want div1 to be always visible when the page load and div2 should be always hidden. On click of "click me" div should toggle.

Code is as follow

<button onclick="showAndHideUl()" id="preview">click me!</button>
<div1 id="withoutcomponent">
      // first ul list
</div>    
<div2 id="withcomponent"> 
      //second ul list
</div>

This is what i am doing 

<script> 
$(document).ready(function(){
    $("#withcomponent").hide();
    showAndHideUl = function() {
        $(function() {    
            $("#preview").on("click", function(){
                $("#withoutcomponent").hide();
                $("#withoutcomponent").removeClass("component");
                $("#withcomponent").show();
            });
        });
    }
});
</script>

Upvotes: 1

Views: 4320

Answers (3)

Sudhakar Lahane
Sudhakar Lahane

Reputation: 149

There are some mistakes in your markup as @Striped said. And should be more clarity in your question.

I am hoping you want to do as below.

$("#preview").on('click', function(e) {             
  $('#withoutcomponent, #withcomponent').toggleClass('display');
});
* {
    padding: 0;
    margin: 0;
}
body {
    padding: 10px;
}
div {
    width: 300px;
    background: #fdb839;
    padding: 20px;
}
ul {
    list-style: none; 
    font-size: 20px;
}
    li {
        padding: 5px 10px;
    }
button {
    width: 120px;
    height: 30px;
    margin-bottom: 20px;
}
.withoutcomponent,
.withcomponent {
    display: none;
}
.display {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="preview">click me!</button>
<div id="withoutcomponent" class="withoutcomponent display">
    <h1>First Div</h1>
    <ul>
        <li>First Ul: sone content 1</li>
        <li>First Ul: sone content 2</li>
        <li>First Ul: sone content 3</li>
    </ul>
</div>

<div id="withcomponent" class="withcomponent"> 
    <h1>Second Div</h1>
    <ul>
        <li>Second Ul: sone content 1</li>
        <li>Second Ul: sone content 2</li>
        <li>Second Ul: sone content 3</li>
    </ul>
</div>

Upvotes: 0

JSEvgeny
JSEvgeny

Reputation: 2750

First of all there is no such html tags as div1 or div2 it is always <div>. Second, your function is a bit messed up and you should make sure that you have correctly included jQuery library, because you are using it in your script. Check out working snippet I made for you. And it is also a good practise to use .toggle() instead of .hide() .show() because it is less risky with making mistakes

$(document).ready(function(){
    $("#withcomponent").toggle();
    showAndHideUl = function()
    {
        $("#withoutcomponent").toggle();
        $("#withoutcomponent").toggleClass("component");
        $("#withcomponent").toggle();
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showAndHideUl()" id="preview">click me!</button>
    <div id="withoutcomponent">
    // first ul list
    </div>

    <div id="withcomponent"> 
    //second ul list
    </div>

Upvotes: 1

angel.bonev
angel.bonev

Reputation: 2232

You are adding event after first click ,remove onclick="showAndHideUl()" and try this: 

<script>
$(document).ready(function () {
    $("#withcomponent").hide();
    $("#preview").on("click", function () {
        $("#withoutcomponent").hide();
        $("#withoutcomponent").removeClass("component");
        $("#withcomponent").show();
    });
});
</script>

Upvotes: 0

Related Questions