CODEWITHSUNDEEP
javascriptcontent-management-systemgpeasy
Hetana
Hetana

Reputation: 274

gpEasy CMS javascript hide/show text

I'm currently working with the gpEasy CMS and I would need to reproduce the hide/show effect that is on this website: http://frontiers.epfl.ch/index.php/Program (links in the program). I went to the code source and added the function showAbstract that was already here:

function showAbstract(e){
  f = e;
  var div;
  for(div = e.nextSibling; div.className != "abs"; div = div.nextSibling);

  if (div.style.display=="block"){
    div.style.display="";
  } else {
    div.style.display="block";
  }
  return true;
}

So I added it to my code and used the class="abs" to call it :

<a href="javascript:void(0)" onclick="showAbstract(this)">Matrix completion ...</a>

<div class="abs"> Recent ubiquity ... </div>

Unfortunately, I just have the text displaying but not the effect expected. Would you have any idea ?

Thanks!

Upvotes: 1

Views: 229

Answers (1)

user697576
user697576

Reputation: 827

The problem has to do with how you show/hide the <div>. Since you have jQuery, I would do something like this:

<a class="show_abstract">Matrix completion ...</a>
<div class="abs"> Recent ubiquity ... </div>

..

<script type="text/javascript">
$(function(){
    $('.show_abstract').click(function() {
        $(this).next('div.abs').toggle('slow');
    });
});
</script>

Upvotes: 2

Related Questions