Element does not expand on click

keys 0
Viewed 59

I'm kind of a newbie coder and I'm having a bit of trouble.

I want to make an element expand when I click a line of text, but it simply is just not expanding and I'm not sure what I'm doing wrong.

For reference, this is the site or info card I'm working on.

The text that says "click me" is what I'm trying to make expand said element.

I would really appreciate any help or advice on how to fix this.

$(".expander").click(function() {
  if ($(this).hasClass("expander")) {
    $(this).removeClass("expander");
  } else {
    $(this).addClass("expander");
  }
});
.expander {
  height: 3em;
  overflow: hidden;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="box-shadow: 2px 2px 4px #242424; background-color: rgba(33, 33, 31, 2); border-top: double #831407 0px; border-left: double #831407 0px; padding: 10px; width: 159px; overflow:auto; position:relative; center: 20px; top: 20px;">
  <font face="times new roman" color="#831407" size="1">
    <div align="center" style="text-shadow: 0px 0px 0px #831407, 0px 0px 0px #3C4595;">
      <font size="2px"><img src="https://yokai.crd.co/assets/images/gallery03/4246c620.gif?v=b4df531c" style="width:15px;height:15px"> <b>mikey</b> <img src="https://yokai.crd.co/assets/images/gallery03/58ed5769.gif?v=b4df531c" style="width:15px;height:15px"></font>
      <font face="times new roman" color="#831407" size="1"><br><b>they</b> | <b>adult</b> | <b>isfp</b></font>
      <br>
    </div>
</div>

<div class="expander">click me

jquery javascript css html
1 Answers

You can also use .slideToggle() method of jquery. Here is an example :

$(".expander").click(function () {
    $(this).next(".expanded").slideToggle();
    //open up the expanded- toggle the slide- if visible, slide up, if not slidedown.

});
.expanded{
  height: 100px;
  background : green;
  display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expander"><button>click to expand</button></div>
<div class="expanded"></div>

debugger0
Related