Como ocultar o elemento div por padrão e mostre -o clique em usar JavaScript e Bootstrap?

Esconder os elementos de uma página da Web HTML e mostrando -os em um determinado botão pressionar é bastante simples com a ajuda de CSS, Bootstrap e JavaScript. Existem várias abordagens para este problema. No entanto, nenhum deles pode ser considerado ideal ou a "melhor" solução. Este artigo adotará a abordagem de definir a propriedade de exibição da div para nenhuma no início e alterá -la com a ajuda do JavaScript.

Passo 1: Configure o documento HTML

A primeira etapa é começar criando um documento HTML e dentro desse arquivo HTML, basta incluir uma div e um botão com as seguintes linhas:

Este é o div
Clique para mostrar

Nas linhas acima:

• A está sendo criado com um ID específico que é “Hidediv”
• Um botão é criado com o tag, com um conjunto de propriedades onclick igual a ButtonClicked () função do arquivo de script

Neste ponto, o documento HTML cria a seguinte página da web no navegador:

Uma div com texto e um botão está sendo exibido na página da web.

Etapa 2: Configure o arquivo CSS ou a tag

Crie um arquivo CSS e vincule -o ao documento HTML ou use um <estilo> tag. A div ainda não é proeminente o suficiente. Portanto, adicionar algum estilo a ele seria ótimo:

#hidediv
Coro de fundo: Yellowgreen;
Altura: 150px;
Largura: 150px;

Nas linhas acima:

• A div é a referência usando seu id como “hidediv "
• Uma altura e uma largura são especificadas para o div
• Uma cor de fundo foi dada à div

Neste ponto, o documento HTML se parece com o seguinte:

No entanto, para ocultar a div no início, adicione mais uma linha ao arquivo CSS que é:

Mostrar nenhum;

A parte inteira do CSS se tornaria:

#hidediv
Mostrar nenhum;
Coro de fundo: Yellowgreen;
Altura: 150px;
Largura: 150px;

Agora, o HTML se parece com o seguinte:

A div não está sendo exibida na página da web html no início.

Etapa 3: Configure o arquivo JavaScript ou a tag

Agora, para adicionar funcionalidade ao pressionar o botão, basta adicionar as seguintes linhas JavaScript ao documento HTML usando um tag ou um arquivo javascript vinculado:

função buttonClicked ()
$ ("#hidediv").mostrar();

Nessas linhas:

• É criado uma função ButtonClicked () que seria chamado ao clique do botão devido ao OnClick () propriedade definida dentro do marcação
• A div é referenciada por seu id que é “Hidediv”
• O método show () é chamado na div, que permite seu mostrar propriedade

Neste ponto, a página da web html funciona como a seguir:

A div é exibida na pressão do botão e o problema foi totalmente abordado.

Embrulhar

Uma div pode ser facilmente escondida no início de uma página da web com a ajuda do mostrar propriedade do elemento HTML, e pode ser facilmente exibido novamente no botão Pressione com JavaScript. Este artigo exibiu o procedimento passo a passo para realizar a tarefa em questão. No entanto, como mencionado no início deste artigo, existem várias abordagens para esse problema, e nenhuma delas pode ser considerada a melhor solução.