How to open a <div> by clicking on a <a> link?

Question

I’m creating an element for a personal website, and I’d like that element "<div>" is open/closed when clicked on a button.

Is a <div> containing some country flags to change language.

I think that function could be used .slide jQuery to create this effect.

But I only know the basics in jQuery.

Thanks in advance :)

Obs: The div to be opened is this:

<div id="paises">Aqui ficará as bandeiras</div>

Answer 1

To display or hide an element based on the click of another we will need to use two methods:

• jQuery .on() to execute code when the button receives a click.

• jQuery .slideToggle() to animate the target element and switch its presentation between "hidden" and "visible".

See example in Jsfiddle.

$('button').on("click", function() {
  $('div').slideToggle();
});

div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Tens bandeiras?</button>
<div>Tenho, bué da bandeiras, mas é assim, não sei onde meti os icons e então acabei por escrever um texto muito longo a dar conta que não sabia dos icons e nem sei se todos estão a ler isto até ao fim? Tu estás? É pá! Bora lá bater um papo...</div>

Answer 2

It is not necessary to use Javascript in most cases where it is necessary to do some kind of toggle in another element. Just one <input> type checkbox to make sure when to show or hide, then in the style sheets you can use the pseudo-class :checked to create rules depending on the state of the input.

/* Escondendo a caixinha de marcação e o div alvo. */
div, input{ 
  display: none
}

/* Texto exibido quando o checkbox não estiver marcado. */
input + label::before {
  content: 'Mostrar '
}

/* Texto exibido quando o checkbox estiver marcado. */
input:checked + label:before {
  content: 'Esconder '
}

/* Exibe o elemento de ID 'bandeiras' quando o checkbox estiver marcado. */
input:checked ~ #bandeiras {
  display: block
}


img { width: 300px }

<input type='checkbox' id='toggle'>
<label for='toggle'>Bandeiras</label>

<div id='bandeiras'>
  <img src='http://i.stack.imgur.com/SAGPC.png' alt='Klingons'>
</div>

Evidently this needs a better look, but I focused only on the behavior that was asked ignoring that the click should occur on an anchor element.

Issues like smooth animations and transitions can be solved easily with properties animation and transition of CSS.

---

_{The rule img { width: 300px } was used only p/ limit the size of the image, has no importance for the technique of checkbox.}

Answer 3

You can use the function .slideToggle() and a bit of CSS, example:

function abreFecha(sel) {
  $(sel).slideToggle();
}

#paises {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:abreFecha('#paises')">Clique em mim</a>

<div id="paises">Bandeiras aqui</div>

Answer 4

this link has an example that will help http://www.maujor.com/tutorial/menu-responsivo-em-slider-lateral.php

More to the point, you can take your button click event via js and use your div id in the js.querySelector() or $() of jquery to access the attributes of div and mecher in its css by adding or removing display:None or a visibility:Hidden depending on how you want to maintain the layout for example...