i want to when accordion element is visible span and img element display and when it invisible their not displayed. in fact user click on one of element to display it img and span add it and when user slide toggle span and img hide.

![enter image description here](https://i.stack.imgur.com/XXfed.png)

```js
$("#accordion > li > div").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
```

```css
#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
}
#accordion div {
    display: block;
    background-color: #FF9927;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
#accordion ul{
    display: none;
}
#accordion ul li {
    font-weight: normal;
    cursor: auto;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
    <li>
      <div>Sports <img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">Golf</a></li>
        </ul>
    </li>
    <li><div>Technology<img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">iPhone</a></li>

        </ul>
    </li>
</ul>
```