adding text after an html span element

Question

I have an animation that I need to edit, and it is causing me some problems.

On the page I have a chevron image, and then a text container with text more or less . This info is describing a person and if you click on either the chevron or the text, the window expands so that the user can read all of the information.

If I click on more the animation expands, (which is good), and the text switches to less . However the problem is that if I were to click on the chevron then the animation expands, but the text doesn't change, so I wind up with an already expanded animation, and a text stating more when it should state less .

I don't have a fiddle or codepen, but I do have some images that describe whats going on.

This is before the animation

This is after if I click on the chevron, and not the actual text, the text doesn't change.

My JS is a little long. (its also written in coffee script)

  personMore: ->
    $('a.moreLink').each ->
      $thisMore = $(this).children('span.moreText')
      $thisLess = $(this).children('span.lessText')
      $(this).on 'click', (e) ->
        e.preventDefault()
        return
      $thisMore.on 'click', (e) ->
        $allPeople = $('.person')
        $thisPerson = $(this).parents('.isotope')
        $moreLink = $(this)
        $lessLink = $(this).siblings('.lessText')
        $thisP = $(this).parents('.moreLink').siblings('p')
        $moreLink.hide()
        $lessLink.show()
        $thisP.toggleClass 'moreActive'
        $thisPerson.removeClass('someonesActive').addClass 'activePerson'
        e.preventDefault()
        return
      $thisLess.on 'click', (e) ->
        $allPeople = $('.person')
        $thisPerson = $(this).parents('.isotope')
        $lessLink = $(this)
        $moreLink = $(this).siblings('.moreText')
        $thisP = $(this).parents('.moreLink').siblings('p')
        $openItems = $('.moreActive').size()
        $lessLink.hide()
        $moreLink.show()
        $thisP.toggleClass 'moreActive'
        e.preventDefault()
        if $openItems == 1
          $('.person').removeClass 'activePerson'
        return
      return
    return

My view is

.row
  .person.col-sm-4.isotope
    %a{href: "https://www.linkedin.com/in/harambe", target: "window"}
      %h3 Harambe
    %h4 Worlds Greatest Gorilla
    = image_tag "harambe.jpg"
    %p
      Hot chicken gochujang kombucha artisan. Cornhole snackwave enamel pin helvetica, listicle pabst fingerstache blog. Neutra butcher tote bag activated charcoal, semiotics organic pitchfork forage woke. Brooklyn activated charcoal put a bird on it jean shorts. Fam subway tile readymade skateboard heirloom, ugh shabby chic vinyl echo park bespoke whatever. Disrupt microdosing vice tilde, tattooed chia mlkshk humblebrag master cleanse swag kickstarter. Activated charcoal gastropub vinyl, banjo raclette 90's deep v celiac bitters meh.
    %a.sliding.moreLink{:href => "#"}
      %span.moreText more
      %span.lessText less
    %a.moreLink{:href => "#"}
      %span.moreText= image_tag "moreArrow.png", alt: "more / less"
      %span.lessText= image_tag "moreArrow.png", alt: "more / less"

Finally my CSS

.aboutPeople .person a.moreLink{
  text-align: center;
  display: block;
  font-style: italic;
  position: relative;
  z-index: 99;
  background: #ebebeb;
  padding-bottom: 20px;
  width: 80%;
  margin: 0 auto;
}

Answer 1

It makes sense cause a.more_link with with images has no text inside.

Anyway, I think the view is too complex for what you are trying to achieve and it makes the js way more complex and dependant.

Reducing the links to just one and changing one class, you could get the same result and everything gets more neat. I will try to reduce it more to just have one class on .person and the styling inside dependant on it. Maybe even you can avoid using someonesActive with CSS3 ~ selector relative to .activePerson ...

.row
  .person.col-sm-4.isotope
    %a{href: "https://www.linkedin.com/in/harambe", target: "window"}
      %h3 Harambe
    %h4 Worlds Greatest Gorilla
    = image_tag "harambe.jpg"
    %p
      Hot chicken gochujang kombucha artisan. Cornhole snackwave enamel pin helvetica, listicle pabst fingerstache blog. Neutra butcher tote bag activated charcoal, semiotics organic pitchfork forage woke. Brooklyn activated charcoal put a bird on it jean shorts. Fam subway tile readymade skateboard heirloom, ugh shabby chic vinyl echo park bespoke whatever. Disrupt microdosing vice tilde, tattooed chia mlkshk humblebrag master cleanse swag kickstarter. Activated charcoal gastropub vinyl, banjo raclette 90's deep v celiac bitters meh.
    %a.sliding.moreLink{:href => "#"}
      %span.moreText more
      %span.lessText less
      %span.lessText= image_tag "moreArrow.png", alt: "more / less"

less:

.aboutPeople .person a.moreLink{
  text-align: center;
  display: block;
  font-style: italic;
  position: relative;
  z-index: 99;
  background: #ebebeb;
  padding-bottom: 20px;
  width: 80%;
  margin: 0 auto;
  .lessText{
    display: none;
  }
  &.open{
    .moreText{
      display: none;
    }
    .lessText{
      display: block;
    }
  }
}

coffe (sorry if the syntax is not right)

  personMore: ->
    $('a.moreLink').on 'click', (e) ->
      e.preventDefault()
      $this = $(this)
      $allPeople = $('.person')
      $this.toggleClass 'open'
      $this.siblings('p').toggleClass 'moreActive'
      if $this.hasClass('open')
        $allPeople.addClass('someonesActive').removeClass 'activePerson'
        $this.cosest('.person').removeClass('someonesActive').addClass 'activePerson'
      else
        $this.cosest('.person').removeClass 'activePerson'
      if $('.person.activePerson').length <= 0
        $allPeople.removeClass('someonesActive')
      return
    return

I tried to imagine what you were trying to do, but this is just a thought.

Answer 2

The issue is with how you are defining the $moreLink and $lessLink variables:

$moreLink = $(this)
$lessLink = $(this).siblings('.lessText')

In this snippet, you are only getting the clicked element as $moreLink and you are only getting the span with class lessText adjacent to the clicked element as $lessLink .

You actually want to hide and show both sets of spans when an element is clicked.

If there is only a single one of these animations on a page, you can switch your selectors to:

$moreLink = $('span.moreText')
$lessLink = $('span.lessText')

If there are multiple on a page, you'll need to either add an extra identifier to each animation or filter the elements another way, ie:

$moreLink = $(this).closest('.isotope').find('span.moreText')
$lessLink = $(this).closest('.isotope').find('span.lessText')