Hide/Show multiple times on a page
Question
First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
Html:
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><br/><br/>See more >></a>
</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><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
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';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.
4 answers
solution1
5 ACCPTED 2014-03-19 03:46:54
In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
- every id="example.. to id="example2... in the second div.
- load the script in "No wrap - in head" mode (jsfiddle left option)
solution2
1 2014-03-19 03:47:04
In your fiddle you need to select the no wrap in <head> option. Your code works fine.
Aslo you can't have duplicate id's
solution3
1 2014-03-19 04:09:46
if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated
solution4
1 2014-03-19 04:21:59
Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class. you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.