CODEWITHSUNDEEP
javascripthtml
SHAMSEY
SHAMSEY

Reputation: 31

I nedd to use this code (See more...) more than one time in one page

Trying to add (see more) in all the pragraph in the same page however when I add the code more than one time, its work only in one pragraph any help?

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';
}
  }}

HTML CODE

<p>
 <a href="#" id="example-show" class="showLink" onclick="showHide('example');">See more...</a>
</p>
<div id="example" class="more">
  <p>Extra words.....</p>
  <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');">Hide.</a>
  </p>
</div>

CSS

.more {
 padding:0 3px 0 0;
 display: none;
 border: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}

only I can use it one time.

how can I use it more than one time in the same page?

Upvotes: 0

Views: 124

Answers (1)

Mark
Mark

Reputation: 6855

you should change the id's, i guess that you paste the same code over and over, without changing the id's:

<p>
<a href="#" id="example-show" class="showLink" onclick="showHide('example');">See more...</a>
</p>
<div id="example" class="more">
    <p>Extra words.....</p>
    <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');">Hide.</a>
    </p>
</div>

<p>
<a href="#" id="example-show2" class="showLink" onclick="showHide('example2');">See more...</a>
</p>
<div id="example2" class="more">
    <p>Extra words.....</p>
    <p><a href="#" id="example2-hide" class="hideLink" onclick="showHide('example2');">Hide.</a>
    </p>
</div>

Upvotes: 3

Related Questions