[Résolu] Rendre visible un bloc

Bonjour,

Je débute en javascript et je souhaiterai écrire une fonction qui rende visible un aside lorsque l'on clique sur un élément de la page, le bloc aside ayant été mis en display:none par le média queries. Voici le code HTML concerné :

<aside>
						
								<h4 class="HowPlay">Taux de présence des cartes.</h4>
							
									<ul>
								
										<li>Ange Déchu Désir : 1x dans 88.8% des decks.</li>
										<li>Ange Déchu Ukobak : 1x dans 88% des decks.</li>
										<li>Cyclone Cosmique : 2x dans 65% des decks.</li>
										<li>Ange Déchu Tezcatlipoca : 1x dans 62% des decks.</li>
										<li>Ange Déchu Nasten : 3x dans 54% des decks.</li>
										<li>Ange Déchu &Eacute;toile du Matin : 1x dans 50% des decks.</li>
								
									</ul>
						
								<h4 class="HowPlay">Popularité des compétences</h4>
							
									<ul>
								
										<li>Un Lien puissant dans 50% des decks.</li>
										<li>Pioche de la Destinée dans 35% des decks.</li>
										<li>Compensation dans 12% des Decks.</li>
								
									</ul>
								
								<h4 class="HowPlay">Side Deck Possible</h4>
														
									<img src="Img/Side/sidedarklord.png" class="adjust" title="exemple de side">
					
									<p>Compétence de side : Armée Posthume</p>
								
							</aside>
						
						</section>
						
						<p class="clear">Cliquer <a onclick="showen_aside()" href="javascript:void(0)" title="Définition">ici</a> pour des informations supplémentaires</p>

Le code CSS

aside
{
float:right;
border:solid black 1px;
width:25%;
}
@media screen and (max-width: 1300px)
{
	aside
	{
	display:none;
	}
}

et pour finir ce que j'ai tenté en Javascript

function showen_aside
{
if (window.matchMedia("(max-width: 1300px)").matches)
document.getElementByTagName(aside).style.display = block;
}

J'ai vraiment l'impression que ce code est trop simpliste pour effectuer l'opération et qu'il manque des éléments. Si quelqu'un pouvait me mettre sur la voie. Merci d'avance.
Modifié par gobjer (17 Nov 2019 - 11:23)

Hello,

Pour te mettre sur la bonne voie, je te propose ceci:
https://jsfiddle.net/L502rn8q/

Ok alors voici ce que j'ai fait et qui fonctionne

<p class="clear" >Cliquer <a onclick="showen_aside()" href="#show">ici</a> pour des informations supplémentaires</p>

@media screen and (max-width: 1300px)
{
	aside
	{
	display:none;
	}
}

function showen_aside()
{
document.getElementsByTagName('aside')[0].style.display="block";
document.getElementsByTagName('aside')[0].style.clear="both";
document.getElementsByTagName('aside')[0].style.float="none";
document.getElementsByTagName('aside')[0].style.width="90%";
document.getElementsByTagName('aside')[0].style.margin="5%";
document.getElementsByClassName('clear')[0].style.display="none";
};

Merci pour ton aide.
Modifié par gobjer (18 Nov 2019 - 12:45)

Re,

Je ne comprends pas pourquoi tu ne pars pas du code que j'ai envoyé. Il est beaucoup plus propre et maintenable. Je vois que tu es débutant en javascript. Le code que je t'ai envoyé fait l'affaire ou pas ? Les "float" sont à éviter. Utiliser flexbox plutôt. Et le mieux serait d'utiliser les classes pour manipuler l'affichage des balises.

Quelle(s) fonctionnalité(s) essaies-tu de mettre en place exactement ?