18041 sujets

Questions générales et questions de débutants

[Résolu] Afficher/Cacher un texte en cliquant sur le titre

Voilà, j'ai fait un CV Numérique mais le problème lorsque je veux cliquer sur "Expériences professionnelles" je veux que tout le texte qui est en dessous, sois afficher ( au debut cacher ) , et en en recliquant, nous cachons le texte.

CODE HTML : 

<!DOCTYPE html>
<html>
    <head>
        <title>prenom </title>
        <meta charset-"UTF-8"/>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="cv prenom.js"></script>
</style> 
    </head>
    <body
        <div class = "page">
        	<div class = "Présentation">
        		<h3>Présentation</h3>
            <div class = "infophoto">
            	<h2>CONTACT</h2>
                <div class = "info">
                <p><strong>prenom</strong><br/>
                TEXTE</p>
                </div>
            </div>
            <div class = "photo">
            	<img src = "photo prenom.png" alt ="prenom+nom"/>
            </div>
            <div class = "section">
                <h2>EXPERIENCES PROFESSIONNELLES</h2>
                <div class = "sec-gauche" id = "forma-gauche">
                    <p>date<br/><br/><br/><br/></p>
                    <p>date</p>
                    <p>date<br/><br/><br/><br/></p>
                    <p>date</p>
                    <p>date</p>
                </div>
                <div class = "sec-droite">
                    <p><span class = "titre">TITRE</span><br/>
 					<p>TEXTE
                    TEXTE<br/>
                    TEXTE<br/>
                    TEXTE<br/></p>
                    <p><span class = "titre">TITRE</span><br/>                   
                     TEXTE
                    <p><span class = "titre">TITRE</span><br/>
                    TEXTE<br/>
                    TEXTE<br/>
                    TEXTE<br/>
                    TEXTE<br/>
                    <p><span class = "titre">TITRE</span><br/>
                    TEXTE<br/>
                    <p><span class = "titre">TITRE</span><br/>
                    TEXTE<br/>
                    TEXTE<br/>
                </div>
            </div>
            <div class = "section">
                <h2>FORMATIONS</h2>
                <div class = "sec-gauche" id = "forma-gauche">
                    <p>DATE</p>
                    <p>DATE</p>
                    <p>DATE</p>
                </div>
                <div class = "sec-droite">
                    <p><span class = "titre">TITRE</span><br/><span class = "lieu">(LIEUX)</span>
                    <p><span class = "titre"> TITRE</span><br/><span class = "lieu">(LIEU)</span>
                    <p><span class = "titre"> TITRE</span></br><span class = "lieu">(LIEU)</span>
                </div>
            </div>
            <div class = "section">
                <h2>COMPETENCES</h2>
                <div class = "sec-gauche" id = "compet-gauche">
                <p>COMPET : <br/></p>
                <p>COMPET : </p>
                <p>COMPET : </p>
                </div>
                <div class = "sec-droite" id ="compet-droite">
                <p>COMPET</p>
                <progress id="file" max="100" value="60"> 60% </progress>
                <p>COMPET </p>
                <progress id="file" max="100" value="70"> 70% </progress>
                <p>COMPET</p>
                <progress id="file" max="100" value="80"> 80% </progress>
                </div>
            </div>
            <div class = "section">
                <h2>CENTRES D'INTERET</h2>
                <div class = "sec-gauche" id = "centre-gauche">
                <p> IDEE
                </div>
                <div class = "sec-droite">
                </div>
            </div>
        </div>
    </body>
</html>


Mon code CSS : 


.page{
	width: 780px;
	margin: auto;
	font-family: 'Source sans Pro' , Calibri , Tahoma , sans-serif;
	font-size: 16px;
	border : 3px solid #3388CC;
	border-radius : 10px;
	box-shadow: 2px 4px 3px black;
	padding: 20px;
}

.infophoto{
	height: 250px;

}

.info{
	float: left;
	margin-top: -32px;
}

.photo{
	float: right;
	margin-top: -200px;
}

.section{
	margin-bottom: 70px;
}

.sec-gauche{
	float: left;
	font-weight: bold;
}

.sec-droite{
	margin-left: 150px;
}

h2{
	font-size: 28px;
	color: #3388BB;
	border-bottom: 3px solid #3388DD;
}

h3{
	font-size : 40px;
	text-align: center;
}

.lieu{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;

}

.titre{
	font-weight: bold;
	font-size: 20px;
}

#forma-gauche p{
	margin-bottom: 40px;
	margin-top: 8px;
}

#compet-gauche p{
	margin-top: 0px;
	margin-bottom: 30px;
}

#compet-droite p{
	margin-bottom: 0px;
	margin-top: 10px;
}

strong{
	font-size: 22px;
}

#centre-gauche p{
	margin-top:-15px;
}
Sujet clos
Aller à