Refreshing additional content when clicking on neighboring tiles

[mateoarrae]

Hello, looking for suggestions.

Is there a way to force the redraw of the expanded box contents when clicking on neighboring titles when the expanded box is already open?

For example, I've added social icons below the paragraph using a list (and that list varies tile by tile; aka member bios). However, some tiles have more social profiles then others. When opening one tile with only a couple social profiles (e.g., twitter and facebook) and then clicking on the next tile which has a few more (e.g., twitter, facebook, google plus, and rss feed) only the original couple social profiles show up (i.e., the original twitter and facebook but with the correct urls) unless you close the expanded box and reopen it.

1) Click on one tile with fewer social profiles:

2) Next, click on the neighboring tile that has more social profiles but as you can see only it's only showing the same profiles as the previous tile:

3) Close and reopen neighboring tile to see that it actually has more social profiles:

I added this to the create function to format the output html…

this.$twitterlink   = $( '<a href="" target="_blank"></a>' );
this.$facebooklink  = $( '<a href="" target="_blank"></a>' );
this.$linkedinlink  = $( '<a href="" target="_blank"></a>' );
this.$googlepluslink = $( '<a href="" target="_blank"></a>' );
this.$rsslink       = $( '<a href=""></a>' );
this.$twitter       = $( '<li class="og-twitter"></li>' ).append ( this.$twitterlink );
this.$facebook      = $( '<li class="og-facebook"></li>' ).append ( this.$facebooklink );
this.$linkedin      = $( '<li class="og-linkedin"></li>' ).append ( this.$linkedinlink );
this.$googleplus    = $( '<li class="og-googleplus"></li>' ).append ( this.$googlepluslink );
this.$rss           = $( '<li class="og-rss"></li>' ).append ( this.$rsslink );
this.$social        = $( '<ul class="og-social list-inline"></ul>' ).append( this.$twitter, this.$facebook, this.$linkedin, this.$googleplus, this.$rss );

…and then added to the update content section with…

// update preview´s content
var $itemEl = this.$item.children( 'a' ),
    eldata = {
        //href      : $itemEl.attr( 'href' ),       //url
        largesrc    : $itemEl.data( 'largesrc' ),   //avatar
        name        : $itemEl.data( 'name' ),       //name
        title       : $itemEl.data( 'title' ),      //title
        description : $itemEl.data( 'description' ),//bio
        twitter     : $itemEl.data( 'twitter' ),    //twitter
        facebook    : $itemEl.data( 'facebook' ),   //facebook
        linkedin    : $itemEl.data( 'linkedin' ),   //linkedin
        googleplus  : $itemEl.data( 'googleplus' ), //googleplus
        rss         : $itemEl.data( 'rss' ),        //rss
    };
//largesrc defined below
//this.$href.attr( 'href', eldata.href );
this.$name.html( eldata.name );
this.$title.html( eldata.title );
this.$description.html( eldata.description );

if (eldata.twitter == undefined){
    this.$twitter.remove();
}else{
    this.$twitterlink.attr( 'href', 'https://twitter.com/' + eldata.twitter );
}

if (eldata.facebook == undefined){
    this.$facebook.remove();
}else{
    this.$facebooklink.attr( 'href', 'https://www.facebook.com/' + eldata.facebook );
}

if (eldata.linkedin == undefined){
    this.$linkedin.remove();
}else{
    this.$linkedinlink.attr( 'href', 'https://www.linkedin.com/in/' + eldata.linkedin );
}

if (eldata.googleplus == undefined){
    this.$googleplus.remove();
}else{
    this.$googlepluslink.attr( 'href', 'https://plus.google.com/' + eldata.googleplus + '/' );
}

if (eldata.rss == undefined){
    this.$rss.remove();
}else{
    this.$rsslink.attr( 'href', '/author/' + eldata.rss + '/feed/' );
}