search

kswedberg / jquery-expander

Expand and Collapse HTML content
https://kswedberg.github.io/jquery-expander/
Other
459 stars 168 forks source link

Space between spans creates space inside link #122

Closed lucasbasquerotto closed 7 years ago

lucasbasquerotto commented 7 years ago

This plugin is working fine for me for almost all cases, but when a link is separated in 2, the second part was in a new line.

I solved that using fadeIn and fadeOut as the expandEffect and collapseEffect, respectively, as exposed here.

Although the problem was almost solved, the link had a space between the 2 parts. Looking for the cause with the browser tools, I've found that there is a space between the span tags with classes read-more and details, that are generated automaticaly by the plugin, as shown below:

<a href="https://my.url.com" class="linkified" target="_blank">https://</a><span class="read-more" style="display: none;">… <a href="#" class="more-link">Read More</a></span> <span class="details" style="display: inline;"><a href="https://my.url.com" class="linkified" target="_blank">my.url.com</a>[...more html]

The space is in this part [...]Read More</a></span> <span class="details"[...].

The link appears as https:// my.url.com.

The link works fine if I click in any part of it, but the space is not good for the user experience IMO.

I don't know if you have control overs the space between the spans, but it would be great if both spans had no space between them.

Thanks for the plugin, anyway :)

martin-oz commented 7 years ago

The space is an option that you can modify.

https://github.com/kswedberg/jquery-expander#options

// text to include between summary and detail. Default ' ' prevents appearance of
// collapsing two words into one.
// Was hard-coded in script; now exposed as an option to fix issue #106.
detailPrefix: ' ',
lucasbasquerotto commented 7 years ago

@martin-oz Thanks! That solves the issue.