hide div A if div B is show

Question

i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.

But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.

You can check my jsFiddle click here

<script>
    $(document).ready(function() {
        $("#view_1").click(function(e) {
            e.stopPropagation();
            $(".box_1").toggle();
        });
        $(document).click(function() {
            var $el = $(".box_1");
            if ($el.is(":visible")) {
                $el.fadeOut(200);
            }
        });
    });
</script>

* im not sure how to combine this script in one function

Answer 1

Here is your working demo

 $("a").click(function() {
        $('.contact_box').hide();
        $(this).next('div').show();
 }); 

Answer 2

use hide() to hide your corresponding box..

 $("#view_1").click(function(e) {
      e.stopPropagation();
     $(".box_2").hide();  <-----here
      $(".box_1").toggle();
  });

 $("#view_2").click(function(e) {
        e.stopPropagation();
        $(".box_1").hide();<-----here
        $(".box_2").toggle();
    });

fiddle here

Answer 3

should be :

before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();

This will works.

Answer 4

Hi Use the code below,

<script>
    $(document).ready(function() {
        $("#view_1").click(function(e) {
            e.stopPropagation();
            $(".box_1").toggle();
    var $el = $(".box_2");
            if ($el.is(":visible")) {
                $el.fadeOut(200);
            }
        });
        $(document).click(function() {
            var $el = $(".box_1");
            if ($el.is(":visible")) {
                $el.fadeOut(200);
            }
        });
    });
</script>

Hope this solves your problem

Answer 5

Toggle also has callback function you can use it.

$(".box_1").toggle('slow', function() {
    // show hide code or fadeIn fadeOut or other animation
    $(".box_2").fadeOut('fast');
});

Answer 6

Try this:

<div style="position:relative"> 
    <a style="cursor: pointer" id="view_1" class="my_view">View 1</a>

    <div class="contact_box box_1 content_box" style="display: none;">
        <div class="left" style="width:150px; margin-right:10px;">
            <img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
            style="max-width:150px" />
        </div>
        <div class="contact_info left" style="width:250px">
            <div class="company_name">DIV A</div>
            <table width="100%" border="0" class="table_contact">
                <tr>
                    <td width="29">Name</td>
                    <td>: Jenson Button</td>
                </tr>
                <tr>
                    <td style="padding-right:0px">Phone</td>
                    <td>: 012-66558741</td>
                </tr>
                <tr>
                    <td style="padding-right:0px">Email</td>
                    <td>: jb@gmail.com</td>
                </tr>
            </table>
        </div>
</div>
</div>

<br>
<br>
<div style="position:relative"> 
    <a style="cursor: pointer" id="view_2" class="my_view">View 2</a>

    <div class="contact_box box_2 content_box" style="display: none;">
        <div class="left" style="width:150px; margin-right:10px;">
            <img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
            style="max-width:150px" />
        </div>
        <div class="contact_info left" style="width:250px">
            <div class="company_name">DIV B</div>
            <table width="100%" border="0" class="table_contact">
                <tr>
                    <td width="29">Name</td>
                    <td>: Jenson</td>
                </tr>
                <tr>
                    <td style="padding-right:0px">Phone</td>
                    <td>: 012-88542215</td>
                </tr>
                <tr>
                    <td style="padding-right:0px">Email</td>
                    <td>: ac@gmail.com</td>
                </tr>
            </table>
        </div>
    </div>
</div>



$(document).ready(function() {
    $('.my_view').click(function(e) {
        $('.my_view').siblings('div').each(function(){$(this).hide()});
        $(this).siblings('div').toggle();
        e.stopPropagation();
    });
    $(document).click(function() {
        $('.my_view').siblings('div').fadeOut(200);
    });
});