CODEWITHSUNDEEP
jqueryjquery-uiaccordion
Rahul Desai
Rahul Desai

Reputation: 15491

Unable to append FontAwesome icon dynamically inside jQuery UI button

In my project, I have a jQuery UI accordian and few buttons in each section. On click of these buttons I am loading data via AJAX into another <div>.

To show what menu inside accordian is active, I am planning to show the FontAwesome eye icon inside of the button in the accordian, something like this: http://jsfiddle.net/Vw9Z6/11/.

However, this is not working. The HTML gets appended but the icon doesnt show up.

$("div#accordion").accordion({ heightStyle: "content", collapsible: true});

$("input[type=button]").button();

$("input[type=button]").click(function(){
  $(this).append($("<i class='fa fa-eye'></i>"));
});
input[type="button"]{
  display: block;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" />


<div id="accordion">

  <h3><a href="#">Section 1</a></h3> <!-- consider just this section -->

  <div>
    <input type="button" value="Lorem" />
    <input type="button" value="Ipsum" />
  </div>
  <h3><a href="#">Section 2</a></h3>

  <div>
    <p>Section 2 Content</p>
  </div>
  <h3><a href="#">Section 3</a></h3>

  <div>
    <p>Section 3 Content
      <br />Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.
      <br /><a href="http://huwshimi.com/comic/"><img src="http://dotnet.tech.ubc.ca/CourseWiki/images/a/a5/You_must_be_this_tall.png" style="border:none;width:300px"/></a>

    </p>
  </div>
  <h3><a href="#">Section 4</a></h3>

  <div>
    <p>Section 4 Content
      <br />Thanks for reading all four sections.</p>
  </div>
</div>

Equivalent fiddle: http://jsfiddle.net/d6mSA/424/

How do I get this working?

Also, what would be the best way to set this up so that when another button is clicked, the eye icon moves over to that button?

Upvotes: 2

Views: 10094

Answers (1)

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

The issue here is that you can't append the i element to an input element.

So if you want to have it working i could suggest you to use buttons (perhaps you need to review what are you trying to achieve with the inputs).

A very simple and working fiddle here.

HTML:

<div>
    <button>Lorem</button>
    <button>Ipsum</button>
</div>

Javascript:

$("div#accordion").accordion({ heightStyle: "content", collapsible: true});

$("button").button();

$("button").click(function(){
  $(this).append($("<i class='fa fa-eye'></i>")).button();
});

An interesting question about <button> vs. <input type=“button” /> here.

Upvotes: 5

Related Questions