CODEWITHSUNDEEP
jquery
roi
roi

Reputation: 23

jquery - toggle number of divs

I want to have number of URLs that toggle different hidden divs

<a href="#" class="hideButton" id="div1_button">BTN</a>
<a href="#" class="hideButton" id="div2_button">BTN</a>

<div id="div1">
  text here
  <a href="#">CLOSE DIV</a>
</div>

here is the script code (just because i need some text in my message...):

<script>

$( ".hidenBox" ).hide();

$( ".toggleBtn" ).click( function(){
        var div = $(this).attr('id');
        $( div + "_box" ).toggle();
} );

$( ".hideBoxBtn" ).click( function(){
        $( this ).closest(".hidenBox").toggle();
} );

</script>
<div id="div2">
  <div>
    text here
    <a href="#">CLOSE DIV</a>
  </div>
</div>

Upvotes: 0

Views: 91

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

Your code should be like following.

$(".hidenBox").hide();

$(".toggleBtn").click(function () {
     var div = this.id.split('_')[0];
     $('#' + div).toggle();
});

$(".hideBoxBtn").click(function () {
     $(this).closest(".hidenBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="toggleBtn" id="div1_button">BTN</a>
<a href="#" class="toggleBtn" id="div2_button">BTN</a>

<div id="div1" class="hidenBox">
    text here 1
    <a href="#" class="hideBoxBtn">CLOSE DIV</a>
</div>
<div id="div2" class="hidenBox">
    text here 2
    <a href="#" class="hideBoxBtn">CLOSE DIV</a>
</div>

Upvotes: 1

roi
roi

Reputation: 23

$( ".hidenBox" ).hide();

$( ".toggleBtn" ).click( function(){
        var div = $(this).attr('id');

        $( "#" + div + "_box" ).toggle();
} );

$( ".hideBoxBtn" ).click( function(){
        $( this ).closest(".hidenBox").toggle();
} );

Upvotes: 0

Related Questions