Hide a div containing photo and show another div in the same place

Question

I am using jquery / php to access the user’s camera and take a photo for a registration. And on the page change user data I need that when uploaded show the photo recorded in the bank in a div "photodb" and when you click the photo take button appear the new image in another div "photo" hiding the div of the photo recorded in the database. As is the code below I can load the page with the photo of BD but when clicking take photo I disable and do not know how to make appear the div photo that is hidden by default.

    <?php
  <div class='contentarea'>
  <div class='camera'>
    <video id='video'>WEBCAM não encontrada!</video>
    <button id='startbutton' class='btn-toggle' data-element='#photodb'>Tirar foto</button> 
  </div>
  <canvas id='canvas'>  </canvas>
  <div id='photobd'>
    <img src='gera.php?id=$id' border='1'>
  </div>
  <div id='photo' class='output' style="display: none">
    <img src='' border='1'>
  </div>
 </div> 
?>

I can’t use the onclick event because the jquery function already captures the click and tried to use the event screwed up what is working. I used a function found here in the forum show/hide div and I can hide the div photodb but I don’t know how to make div photo appear.

   <script>
   $(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
    });
  });
 </script>

after this how do I change the display:None of div photo to appear?

Answer 1

To hide a div, just use the method .hide() and, to display the div which is hidden, use the method .show(), as an example below:

$(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
        //Oculta a div com id photobd
        $('#photobd').hide();
        //Exibe a div com id photo
        $('#photo').show();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='contentarea'>
  <div class='camera'>
    <video id='video'>WEBCAM não encontrada!</video>
    <button id='startbutton' class='btn-toggle' data-element='#photodb'>Tirar foto</button> 
  </div>
  <canvas id='canvas'>  </canvas>
  <div id='photobd'>
    <img src='http://www.iconsdb.com/icons/preview/gray/screenshot-xxl.png' border='1'>
  </div>
  <div id='photo' class='output' style="display: none">
    <img src='https://lh3.googleusercontent.com/3qybHqE4ff9MOts7v5l4S09W3HtOymwDic4LYzNVU-PhDIFvYAbju8qfRKB7AoxeWA=w170' border='1'>
  </div>
 </div>

Answer 2

There is no problem inserting more than one click event into the same element.

$("#startbutton").on("click", function(){
    $("#photobd").hide();
    $("#photo").show();
});

Simple as that.

Another thing: your code doesn’t work because you are referencing "photodb" in the data-element, but the div id is "photobd". This is the problem with using attributes and code in access. Always do the least.