kdweber89 kdweber89 - 2 months ago 8
CSS Question

adding text after an html span element

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

enter image description here

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

enter image description here

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

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.

Comments