show and hide div on button click even if select options in php

Question

I am trying to show a div on button click. If the button is not clicked then the div should be hidden. The code is working in this scenario. But If I select an option in the form of div i redirects to the old page even i didn't click any button.

If i select any option then it is redirected to custom div. How to solve this?

Update :

I have used hidden element in form also. I think that was my problem.Anyone help me to resolve this.

custom.phtml:

   <div class="content" id="custom">
    <input type="submit" name="create_custom" value="Create Custom" id="create_custom">
    <table id="custom" class="display" cellspacing="1" width="100%" >       

//...datatable
    </table>

</div>
<div class="content" id="test"  style="display:none">
    <?php 
     echo $this->render('/custom/index.phtml');
       ?>
</div>

Module.js :

$(document).ready(function(){
        $("#create_custom").click(function(){
            $("#custom").toggle(1000);
             $("#test").toggle(1000);
        });
    });

Index.phtml:

<?php echo $form; ?>

Form:

public function createElements(array $formData)
    {      
        $this->addElement(
            'note',
            'template',
            array(
                'order'         => 0,
                'value'         => $this->translate('Custom'),
                'decorators'    => array(
                    'ViewHelper',
                    array('HtmlTag', array('tag' => 'h3'))
                )
            )
        );
        if ( $this->filter_type == 'STATIC' ) {
                $this->addElement(
                    'multiselect',
                    'names',
                    array(
                        'order'         => 21,
                        'label' => $this->translate('Name'),
                        'required'      => true,
                        'value' => '',
                        'multiOptions' => array_unique( $this->name),
                        'description'   => $this->translate('Name'),
                        'autosubmit' => false
                    )
                 );
            } else {
                $text_type = (  $this->filter_type == 'MYSQL' )? 'textarea':'hidden';
                 $this->addElement(
                 $text_type,
                'format',
                array(
                    'order'         => 30,
                    'value'         => $this->query,
                    'label'         => $this->translate('Format'),
                    'description'   => $this->translate('Format'),
                    'required'      => true

                )
                );

                 if ( $text_type == 'hidden') {
                    $this->addElement(
                'note',
                'filter',
                array(
                    'order'         => 31,
                    'value'         => $this->filter,
                    'label'         => $this->translate('Format'),
                    'description'   => $this->translate('Format'),
                    'required'      => true    
                )
            );
                 }
    }

        $this->addElement(
            'select',
            'type',
            array(
                'order'         => 1,
                'label' => $this->translate('Type'),
                'required'      => true,
                'value' =>$this->filter_type,
                'multiOptions' => $this->getTypes(),
                'description'   => $this->translate('Type'),
                'autosubmit' => true
            )
        );
}

Thanks in Advance.

Answer 1

You should use Toggle which will helps you a lot with very less code.

You can refer below example for toggle demo.

$("button").click(function(){
    $("p").toggle(1000);
});