How to close divs

Question

How can I make this accordion close and change the image on the open "p" when a user clicks on a link. So far if you click on a link it toggles the content and change the image, but what I don't know how to do is close the open P's. now it work more like a onclick toggle the content.

I try adding, this closes all the p but don't change the img to the default one with plus icon.

$('p').hide();

$(this).bind('keypress click', function(e) {
  e.preventDefault();
  $('p').hide();
  var $icon = $(this).find('.icon'); 
  if($icon.hasClass('first-image'))
  {
    $icon.removeClass('first-image').addClass('second-image');
  }
  else
  {
    $icon.removeClass('second-image').addClass('first-image');
  }
  $(this).next('p').slideToggle();
});

<ul class="accor">
  <li><a href="#"><span class="icon second-image"></span> Item 1</a> 
    <p style="display:block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
  <li><a href="#"><span class="icon first-image"></span> Item 2 </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
</ul>

This is the problem that im having..Item 1 is close but the img is (--) instead of (+)

Answer 1

If I understand you correctly, you need to specify a selector instead of this .

Like below:

$('a').bind('keypress click', function(e) {
  e.preventDefault();
  $('p').hide();
  $('.icon').removeClass('second-image').addClass('first-image');
  var $icon = $(this).find('.icon'); 
  var $p = $(this).next('p').slideToggle();
  if($p.is(':visible'))
  {
    $icon.removeClass('first-image').addClass('second-image');
  }
  else
  {
    $icon.removeClass('second-image').addClass('first-image');
  }
});

li {
  list-style:none;  
}

p {
  display:none;  
}

.icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f067"
}

.icon.second-image:before {
  content:"\f068";  
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accor">
  <li><a href="#"><span class="icon second-image"></span> Item 1</a> 
    <p style="display:block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
  <li><a href="#"><span class="icon first-image"></span> Item 2 </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
</ul>

Somehow the snippet doesn't work here anymore so I created a bin: http://output.jsbin.com/folubu

Answer 2

$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

             //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
              $('.accordionContent').slideUp('normal', function(){
                $(this).prev().find('.img1').removeClass('img2');
                        });

    //IF THE CONTEWNT ISN't OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');
        //$('.accordionButton').find('.img1').removeClass('img2');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal', function(){
            $(this).prev().find('.img1').addClass('img2');
        });
    }
});
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/

$('.accordionContent').hide()
});
</script>