I have a code and I need your help to be able to execute as I want. There are only 2 points: the first thing to put content before (when you upload the site does not appear div or content ), I need to put a content and the user gets come back at him again. Another point is the animation, because when I click from one image to another it is instantaneous, it gets ugly.
Could anyone recommend an effect?
<!DOCTYPE html>
<html>
<head>
<title>TITULO</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="css/all-animation.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script></head><style>#links{float:left;max-width:50%;}#linksli{cursor:pointer;transition:0.3sease;opacity:0.7;}#linksli:hover{opacity:1;}#respostas{max-width:50%;}.faq{margin:20px;display:none;/*colocatodoscomoinvisiveisinicialmente*/}</style><script>functionmostraResposta(id){respostas=document.getElementsByClassName('faq');//recuperatodoselementosdaclassefaqfor(vari=0;i<respostas.length;i++){//colocatodoselesinvisiveisrespostas[i].style.display='none';}clicada=document.getElementById(id);//recuperaoidpassadoporargumentoclicada.style.display='inherit';//fazeleserexibidoconformeoitempai}</script><body><section><divid="conteudo">
<div id="links" style="display: block;">
<ul style="display: block;">
<img src="images/blogger.png" onclick="mostraResposta('lorem')" style="display: block;">
</ul>
<ul style="display: block;">
<img src="images/facebook%20(1).png" onclick="mostraResposta('ipsum')">
</ul>
<ul>
<img src="images/blogger.png"onclick="mostraResposta('lorem')" style="display: block;">
<img src="images/facebook%20(1).png" onclick="mostraResposta('ipsum')">
</ul>
</div>
<div id="respostas">
<div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
<div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>
</div>
</div>
</section>
</body>
</html>