I have several divs on a page with the same class that contain some buttons that are disabled by default. The goal is to highlight one of the divs on hover and to remove the 'disabled' class from the button.
I have been able to do it on ALL of the divs, but can't seem to get it working for only the element being hovered over. Tried $(this).find without luck.
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
Script:
$('.box').hover(
function() {
$('.box .button').removeClass('disabled');
},
function() {
$('.box .button').addClass('disabled');
}
);
Here I have it working on both elements but want to hover / remove disable class on individual box: FIDDLE
Use this to refer the hovered element and get element based on the context.
$('.box').hover(
function() {
$('.button', this).removeClass('disabled');
},
function() {
$('.button', this).addClass('disabled');
}
);
$('.box').hover(
function() {
$('.button', this).removeClass('disabled');
},
function() {
$('.button', this).addClass('disabled');
}
);
.box {
margin: 0 0 1rem 0;
padding: 1rem;
border-radius: 0;
position: relative;
overflow: hidden;
border:1px solid #EFEFF4;
font-size: 0.9rem;
line-height: 1.3rem;
}
.box:hover {
border-color:#59c07b;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.disabled{background:white}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
You can do this.
$('.box').hover(
function() {
$(this).find('.button').removeClass('disabled')
},
function() {
$(this).find('.button').addClass('disabled')
}
);
I don't know how you tried $(this).find(), but it should work for you. Here is a demo:
$('button').text(function(){return this.className;}); //this line is for testing.
$('.box').hover(
function() {
$(this).find('button').removeClass('disabled');
$('button').text(function(){return this.className;}); //this line is for testing.
},
function() {
$(this).find('button').addClass('disabled');
$('button').text(function(){return this.className;}); //this line is for testing.
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
<div class="large-12 columns">
<div class="box">
<button class="button disabled expanded">Button</button>
</div>
</div>
Related
I'm working on a login form for my page that will have 2 options "login" and "signup". Similar concept to mini tabs and iframe windows. Basically There is a div for "login" and a div for "signup" side by side. When you click "login" I want a div (currently set for height: 0 and overflow: hidden) to 'expand' (height: auto; overflow: visible) when you click "login" (login is a DIV not a submit button, it's like a tab).
I do not understand why it is not invoking the function. During my troubleshooting, I replaced the function with another function in my page that I know is 100% working, but still nothing happens.
I included codes of everything I have tried, I did not use the onClick in the HTML tag at the same time as the addEventListener('click'). I just included both so the codes are available. Likewise, in the Javascript, I did not do both add class and set height. I tried them independently.
My preferred method is using eventlistener and add class (which should allow the transition effect to work).
HTML:
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div id="login-content">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
CSS:
/* default state with 0 height, ideally with a .5s transition 0 height to auto */
#login-content, #signup-content {
height: 0;
transition: height .5s;
-moz-transition: height .5s;
-webkit-transition: height .5s;
-o-transition: height .5s;
overflow: hidden;
}
/* class to be added to div */
.expand {
height: auto;
overflow: visible;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
Javascript:
document.addEventListener('DOMContentLoaded',function() {
document.getElementById('login-title').addEventListener('click',loginExpand);
});
function loginExpand() {
document.getElementById('login-content').style.height=500; //tried this
document.getElementById('login-content').classList.add('expand'); //also tried this (separately, not together)
}
You have issue with the CSS. you are assigning the overflow: visible; property with id selector which has higher precedence than class.
.expand class will never overwrite this property, hence the overflow property will always remain hidden. You could use !important in the css property to force the browser to use this.
You could handle this by adding the visible property using javascript.
or use the class selector to apply the css.
Example with Javascript:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('login-title').addEventListener('click', loginExpand);
});
function loginExpand() {
console.log("clicked");
let elem = document.getElementById('login-content');
elem.style.height = 500; //tried this
elem.style.overflow = 'visible';
elem.classList.add('expand'); //also tried this (separately, not together)
}
/* default state with 0 height, ideally with a .5s transition 0 height to auto */
#login-content,
#signup-content {
height: 0;
transition: height .5s;
-moz-transition: height .5s;
-webkit-transition: height .5s;
-o-transition: height .5s;
overflow: hidden;
}
/* class to be added to div */
.expand {
height: auto;
overflow: visible;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div id="login-content">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
</li>
</ul>
</div>
Example with Class selector:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('login-title').addEventListener('click', loginExpand);
});
function loginExpand() {
let elem = document.querySelector('.login-content');
elem.classList.add('expand'); //also tried this (separately, not together)
}
/* default state with 0 height, ideally with a .5s transition 0 height to auto */
.login-content {
height: 0;
transition: all 3s;
overflow: hidden;
}
/* class to be added to div */
.expand {
height: 500px;
overflow: visible;
background-color: burlywood;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div class="login-content">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
</li>
</ul>
</div>
Try this, I used display than using overflow:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('login-title').addEventListener('click', loginExpand);
});
function loginExpand() {
document.getElementById('login-content').style.display = 'block';
}
#login-content,
#signup-content {
height: 0;
transition: height .5s;
-moz-transition: height .5s;
-webkit-transition: height .5s;
-o-transition: height .5s;
}
/* class to be added to div */
.expand {
height: auto;
overflow: visible;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div id="login-content" style=" display:none;">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
I had added just !important to .expand in CSS and its working fine.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('login-title').addEventListener('click', loginExpand);
});
function loginExpand() {
document.getElementById('login-content').classList.add('expand');
}
/* default state with 0 height, ideally with a .5s transition 0 height to auto */
#login-content,
#signup-content {
height: 0;
transition: height .5s;
-moz-transition: height .5s;
-webkit-transition: height .5s;
-o-transition: height .5s;
overflow: hidden;
}
/* class to be added to div */
.expand {
height: auto !important;
overflow: visible !important;
}
/* link-like features to div */
.drop-down-head:hover {
background: #8fffad;
cursor: pointer;
}
<div id="login-box">
<span class="login-head">
<h5 align="center" class="head">Login</h5><hr />
</span>
<ul class="drop-down">
<li>
<!-- LOGIN and SIGNUP tabs -->
<div id="login-title" class="drop-down-head" onClick="loginExpand()">LOGIN</div>
<div id="signup-title" class="drop-down-head" onClick="signupExpand()">SIGNUP</div>
<!-- login content to be expanded from 0 height to auto when "login div" above is clicked -->
<div id="login-content">
<div class="input column" id="first-name">
<input placeholder="First Name" type="text" class="validate white">
<div id="first-name-tooltip" class="tooltip">First Name</div>
</div>
This question already has answers here:
Trigger CSS Animations in JavaScript
(10 answers)
Closed 4 years ago.
Right now I'm trying to add an animation to a div when I press a button.
However, I'm not sure on how to trigger a custom animation on button click with JavaScript or jQuery. As of now I do not have any JavaScript written for this.
Im very new to this, hence me asking the pro's!
HTML:
<div class="container" id="frontPage">
<div "container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a a href="{{ url('/loginpage') }}" class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>
CSS:
#frontPage {
text-align: center;
margin-top: 80px;
position: relative;
animation-name: slideOutLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
width: 500px;
}
#keyframes slideOutLeft {
0% {left: 0;}
100% {left: -1500px;}
}
To trigger a CSS animation on a button click you can put the CSS rules in their own class. You can then apply that class to the required elements when your button is clicked, like this:
$(function() {
$('button').click(function() {
$('#frontPage').addClass('slideOutLeft');
});
});
#frontPage {
text-align: center;
margin-top: 80px;
position: relative;
width: 500px;
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
#keyframes slideOutLeft {
0% {
left: 0;
}
100% {
left: -1500px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div class="container" id="frontPage">
<div id="container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a a href="#" class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>
I have a div that has class name ordershape and it contains another div fad-res.
I want that when I would hover over a particular ordershape, I want to show the corresspondingfad-res whose parent div I hovered, while other divs must be hidden.
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
Your HTML is invalid since you haven't closed the div with the class ordershape
No reason to use jquery for this, CSS can easily achieve this:
.ordershape:hover .fad-res{
display:block;
}
Demo CSS
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
.ordershape:hover .fad-res{
display:block;
}
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
If you want to do it with jquery do it like this.
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
Demo jQuery
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
Do not use javascript for that - rely on the CSS transition and opacity properties instead, with :hover selector.
.fad-res {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
background: #555555;
height: 60px;
width: 100px;
}
.ordershape {
background: #f6f6f6;
height: 100px;
width: 100px;
float: left;
margin-right: 2px;
}
.ordershape:hover .fad-res {
opacity: 1;
}
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
Well, you can try the jquery version this way
$(".ordershape").hover(function(){
$(this).find(".fad-res").toggle();
})
.fad-res{
display : none;
}
.ordershape{
width : 20px;
height: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>
It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/
It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});
Im work with this script :
I want to show/hide text on click, with a single id it works great ( add a fade animation will be great ) but I'm not able to add another ID .. someone could help me ?!
THANKS
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
/**/
#wrap {
float:left;
width:100%;
margin-top:20px;
max-width: 320px;
padding: 5px;
background-color: #f2f2f2; }
#wrap p{
border-bottom:none;
border-top:none; }
#wrap img{margin: 0 auto; margin-bottom:15px;}
h1 {
font-size: 200%; }
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
background:#fff;
color:#333;
padding: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {
color:#E99473;
}
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
According to HTML specification an id property of the element must be unique. You either need to assign different ids to each of your elements, or target them by some less restrictive parameter, such as class.
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example1" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example2" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example3" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
However, you're probably better off using jQuery. With it you can do all kinds of selectors and manipulations (including fade effects) and have more reliable and cleaner code.
Here's your code rewritten without any ids:
jQuery(function() {
jQuery('.showLink,.hideLink').click(function() {
jQuery(this).closest('.wrap').find('.more').fadeToggle(500);
});
});
/**/
.wrap {
float: left;
width: 100%;
margin-top: 20px;
max-width: 320px;
padding: 5px;
background-color: #f2f2f2;
}
.wrap p {
border-bottom: none;
border-top: none;
}
.wrap img {
margin: 0 auto;
margin-bottom: 15px;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
}
a.showLink,
a.hideLink {
text-decoration: none;
background: #fff;
color: #333;
padding: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.hideLink {}
a.showLink:hover,
a.hideLink:hover {
color: #E99473;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
id values should never be same. Maintain unique id values. Then
If you want to show/hide that particular element, with unique id values and respective function:showHide('uniqueIdVal') your existing script should work.
If you are trying to hide/show all the elements on a single click, then you can select all such elements by maintaining a dummy class - XYZ for the elements and finding the elements by document.getElementsByClassName("XYZ");