CODEWITHSUNDEEP
jquerytwitter-bootstraptoggle
Zast
Zast

Reputation: 502

correct way to use a button bootstrap toggle div

I am building a web based email client. I want to add a button that will toggle a div if a user clicks it.

I have:

 <a href='#rply' class='btn btn-default btn-xs pull-right' data-toggle='collapse'>Reply</a>

 <div id="rply" class="collapse">
 ...
 </div>

Which is working, but I want to button to show the div, if it is not already shown, so that I can add functionality for creating a new email, not just replying to an email.

The button code is:

 NEW: <button type="button" id="0:0" name="new_email" class="new_email btn btn-success btn-xs" title="Create a new email!"><span class="el el-icon-file-new"></span></button>

And the code to handle it is:

 $('.new_email').on( 'click', function () {
        OpenEmail( 0 );

    if( ! $("#rply").hasClass("in") ){
        $('#rply').toggle();
    }
 } );

This works, however, if I use the href to hide the div, and then click on the button to show it again, there is a bug that shows the content of the div, but does not show the background of the div. The background is not being displayed, it fails at this point, to show white.

What is the correct way to show the div using the button?

EDIT:

By default the reply div is not visible. The sequence is is that I provide a list of emails, and the user can click on one and it will be displayed. If they decide that they want to reply, they click on the href link that toggles the div. If they then decide that they would rather create a new email, they click on the button, which if the reply div is already visible, it will be hidden, which is what I am trying to avoid by only running the code for the button only if the reply div is not visible.

Upvotes: 0

Views: 1772

Answers (1)

Iceman
Iceman

Reputation: 6145

You can style it however you want using bootstrap or css, but the barebone concept would be something like:

$('#mail_type').toggle();
$("#compose_btn").click(function() {
  $('#mail_type').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="compose_btn">COMPOSE MAIL</button>
<div contenteditable="true" id="mail_type">TYPE MAIL HERE</div>

Upvotes: 2

Related Questions