Jump to content

finishing the school project


Senior

Recommended Posts

How can I make the panel's text disappear when it is hiding and the text is displayed when the panel is showing? Thank you

 

 

I'm sorry for my English

 

 

<!DOCTYPE html>
 
<html>
<head>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
#panel {
padding: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(e){
e.preventDefault();
$("#panel").stop();
$("#panel").slideToggle("slow");
mostrarFrases();
});
mostrarFrases();
});
</script>
<script>
var Frases=new Array()
Frases[0] = "Si en los inicios no puedes alimentar a tu equipo con 2 pizzas, es que es demasiado grande – Jeff Bezos de Amazon.";
Frases[1] = "El valor de una idea radica en el uso de la misma – Thomas Edison.";
Frases[2] = "El trabajo va a ocupar gran parte de tu vida. La única forma de estar realmente satisfecho es hacer aquello que crees que es un buen trabajo, y la única forma de hacer un gran trabajo es amar aquello que haces – Steve Jobs de Apple.";
Frases[3] = "Tus clientes más insatisfechos deben ser tu mayor fuente de aprendizaje – Bill Gates";
Frases[4] = "Una visión de una idea sin la capacidad de ejecución es únicamente una alucinación – Steve Case de AOL.";
var Q = Frases.length;
 
function mostrarFrases() {
var numAleatorio=Math.round(Math.random()*(Q-1));
document.getElementById("panel").innerHTML=Frases[numAleatorio];
}
</script>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>

 

Link to comment
Share on other sites

Use a 'complete' option as described here http://api.jquery.com/slidetoggle/ to run a anonymous function  that will trigger the random function AFTER the slide is complete. Then use if condition to check if element is visible before running it

if($("#panel").is(":visible")){

//run code
}

You can clear the panel using if condition using

if($("#panel").is(":hidden")){

//run code
}

To clear content ready for new when panel is closed and the next click event occurs.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...