Question

I am trying to create a working way to show/collapse content that is added dynamically. I am using rel tags to detect which index and description size that should be shown. I have included my example to make my question easier to understand. However, my solution does not work as it ends up showing the “full” text version only.

Here is the link to my example

http://jsfiddle.net/rowej/z5wTj/15/

or code is below

HTML:

<span id="11_fulltext" rel="11"><p> full text area </p>
  <a href="#" class="switch" rel="big">Toggle</a>
</span>

<span id="11_smalltext" rel="11">
  <p> small text area</p>
  <a href="#" class="switch" rel="small">Toggle</a>
</span>

Jquery (onload):

$(".switch").click(function(e){
  e.preventDefault();
  var index=$(this).closest('span').attr('rel');
  var bigorsmall=$(this).attr('rel');

  alert(index+bigorsmall);
  if(bigorsmall="big"){
    $('#'+index+'_fulltext').hide();
    $('#'+index+'_smalltext').show();    
  }

  if(bigorsmall="small"){
    $('#'+index+'_smalltext').hide();  
    $('#'+index+'_fulltext').show();
  }
});

Is using rel tags like this ok?
Thank you for any help or suggestions!

Answer 1

Check you code,

if(bigorsmall="big"){

Will always be truthy (you are missing an extra = sign)

if(bigorsmall=="big"){

same for second part

if(bigorsmall="small"){ should be if(bigorsmall=="small"){