Javascript show / hide on click multi ID

Question

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=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</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>
   
   <div id="wrap">
     
      <p> 
        <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</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>
   
   <div id="wrap">
     
      <p> 
        <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</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>

Answer 1

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=""/> 

    <a href="#" id="example1-show" class="showLink" onclick="showHide('example1');return false;">+ INFORMAZIONI</a>
  </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><a href="#" id="example1-hide" class="hideLink" onclick="showHide('example1');return false;">Hide this content.</a></p>
  </div>
</div>

<div id="wrap">

  <p> 
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 

    <a href="#" id="example2-show" class="showLink" onclick="showHide('example2');return false;">+ INFORMAZIONI</a>
  </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><a href="#" id="example2-hide" class="hideLink" onclick="showHide('example2');return false;">Hide this content.</a></p>
  </div>
</div>

<div id="wrap">

  <p> 
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 

    <a href="#" id="example3-show" class="showLink" onclick="showHide('example3');return false;">+ INFORMAZIONI</a>
  </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><a href="#" id="example3-hide" class="hideLink" onclick="showHide('example3');return false;">Hide this content.</a></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="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

<div class="wrap">
  <p>
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

<div class="wrap">
  <p>
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

Answer 2

id values should never be same. Maintain unique id values. Then

1. If you want to show/hide that particular element, with unique id values and respective function:showHide('uniqueIdVal') your existing script should work.

2. 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");