Show a div with jQuery

Question

I’m trying to show two divs (container-imagem-upload, container-tipo-video), but it didn’t work. It’s showing the div and disappearing.

CSS

    .container-tipo-video {margin-top: 50px; display: none;}
    .container-tipo-video input{text-align: center;}
    .container-tipo-video video{margin-top: 30px;}

    .container-imagem-upload{display: none;}

HTML

    <div id="center">
        <div id="selecionar">
            <h1>Selecione o tipo</h1>
            <form>
                <input type="radio" name="opcao" value="op_video" id="op_video">Video
                <input type="radio" name="opcao" value="op_imagem" id="op_imagem" checked>Imagem    
                <input type="submit" id="btn_selecionar" >  
            </form>
        </div>
        <div class="container-tipo-video" >         
            <input type="text" id="mudarVideo" value="">
            <input type="button" id="btn-insere"  value="Inserir novo video"/>
            <video  width="100%" height="" id="meuVideo" >
                <source src="" id="tv_main_channel">
            </video>            

        </div>
        <div class="container-imagem-upload">
        <form action="uploadArquivo.php" method="post" enctype="multipart/form-data" id="UploadForm">   
            <input name="arquivoUpload" type="file" /><br>
            <input type="submit" value="Upload">
        </form>
        </div>
        <span id="output"/>
    </div>

jQuery

         $('#btn_selecionar').click(function(){
             $('.container-imagem-upload').show(); 
             $('.container-tipo-video').show(); 
         });

Answer 1

Well, first of all, it’s not working once you’re using the id inside the University in the form, what is not the ideal.

From what I understand, you’re trying to show off div based on the option the person chooses. I don’t know if it suits you because you didn’t say the ultimate goal.

But I have this code using <option> that makes this type of selection. You can modify to use a radio as well.

jQuery:

var $campo = $(".campo"), //Div selecionada a ser exibida quando escolhido a opção
    $selector = $('#meucampo'); //Form usado para selecionar a opção
    $selector.change(function() { //Opção que verifica a mudança do 'value'
        var selected = $(this).find('option:selected').attr('class'); //Pega o value da opção selecionada
        $campo.hide(); //esconde os demais campos
        $('#' + selected + '.campo').show(); //exibe o campo de value igual ao selecionado
    });

HTML:

<form>
    <select name="nomecampo" id="meucampo" class="i-form">
        <option value="1" class="x"></option>
        <option value="2" class="a">Opção 01</option>
        <option value="3" class="b">Opção 02</option>
    </select>
</form>

<div id="a" class="meucampo">
    //seu primeiro conteúdo
</div>

<div id="b" class="meucampo">
    //seu segundo conteúdo
</div>

I hope this helps.