CODEWITHSUNDEEP
twitter-bootstrapmenuaccordion
Hussein
Hussein

Reputation: 49

Drop-down menu to change the image of the bootstrap

I am using accordion bootstrap

I want to change the image when the menu pops up, like picture How do I do this?

Pic Before menu pops up

Pic After menu pops up

This My Code:

 <div class="bs-example" style="font-family:'B Nazanin'">
<div class="panel-group" id="accordion">
<?php foreach ($this->items as $i => $item) : ?>
        <div class="panel panel-default">
        <div class="panel-heading" style="background-color:#c4c3c0">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>"
                 style="text-decoration:none;">


         <img id ="mi" src="components/com_joomfaq/pic/iconmenu.png">

    <?php echo  $item->question;?>  
    </a>
            </h4>
        </div>
        <div id="collapse<?php echo $i; ?>" class="panel-collapse collapse">
            <article class="panel-body" style="background-color:#efeeee; text-align:justify">        


    <?php echo $item->answer; ?>        
     </article>
        </div>
    </div>
<?php endforeach; ?>

 </div>

Upvotes: 0

Views: 785

Answers (1)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

You could toggle a class through jQuery for the image on click at your menu-toggle and then check if the class was toggled before (toggleClass() adds a class at 1st click and removes it if you click a second time). In your HTML you just have to add a class to your toggle element (<a>). I used menu-toggle.

Here is a snippet to demonstrate you the effect

$('.menu-toggle').click(function() {
  $('#mi').toggleClass('toggled');
  if ($('#mi').hasClass('toggled')) {
    $('#mi').attr('src', 'http://files.softicons.com/download/animal-icons/cat-force-icons-by-iconka/ico/cat_sing.ico');
  } else {
    $('#mi').attr('src', 'http://icons.iconarchive.com/icons/iconka/meow/256/cat-walk-icon.png');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="menu-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>" style="text-decoration:none;">
  <img id="mi" src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-walk-icon.png" />
</a>

Upvotes: 1

Related Questions