Can anyone help me? i have a trouble figuring out how to implement a script that when you click on any of the profile pictures it will show up a bios, kinda like this: https://vestar.com/company/leadership/ I only need at least one example script in jquery and from there i will handle the rest. Currently this is what i came up using a different script from from google search: http://derek.phgserver1.com/leadership/ I also need the feature that when you hover over the image and click that it will toggle just like what https://vestar.com/company/leadership/ did to their website. I hope someone here who can help me. Thanks
FadeToggle can do your work
$(document).ready(function(){
$("button").click(function(){
var id = this.id;
$(".bio").not("#"+id+"div").hide();
$("#"+id+"div").fadeToggle();
});
$(document).on("click", function (e) {
if (!$(e.target).is("button")) {
$(".bio").fadeOut();
}
});
});button{
width:50%;
float:left;
}
div{
width:100%;
height:100px;
background-color:lightgrey;
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="first">First</button>
<button id="second">Second</button>
<br><br><br>
<div id="firstdiv" class="bio">Hello First World Bio</div>
<div id="seconddiv" class="bio">Hello Second World Bio</div>
</body>The other problem of grayscale to colored will be done by simple css property filter.
EDIT 2: Added new functionality image will convert to rgb until users click anywhere in document.
$(document).on("click", function (e) {
if (!$(e.target).is("img")) {
$("img").css("filter","grayscale(100%)");
}
});
$("img").hover(function(){
$(this).css("filter","grayscale(0%)");
});img {
filter: gray; /* IE6-9 */
filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
transition-duration:0.2s;
width:100px;
height:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="yourpiclink.png" />Just add image link in img tag