JQuery Accordion Menu Change Arrow Icons

Question

Я полный начинающий JQuery, но мне удалось собрать меню аккордеона для некоторого текста справки. У меня есть это сейчас, так что если у вас одна панель открыта, и вы нажмете, чтобы открыть другую, первая закроется. Теперь я включил некоторые стрелки, которые меняются от лица справа налево, когда вы открываете панель и наоборот.

Проблема, с которой я столкнулся, - это когда я нажимаю на другую панель с первой открытой, иконы не меняются обратно вправо. Надеюсь, кто-то сможет указать, где я ошибаюсь, поскольку сейчас я попробовал несколько вещей и, похоже, выполнил все сценарии, кроме тех, которые я хочу.

Спасибо. Dan

$(document).ready(function($) { 
 
    $('#accordion').find('.accordion-toggle').click(function(){ 
 

 
     //Expands/collapses panel 
 
     $(this).next().slideToggle(0); 
 
\t $("i",this).toggleClass("fa-angle-down"); 
 

 
     //Hides other panels 
 
     $(".accordion-content").not($(this).next()).slideUp(0); 
 
\t $(".accordion-content").find("i").not($(this).next()).toggleClass("fa-angle-down"); 
 
\t 
 
\t 
 
    }); 
 
    });

<style> 
 
    .accordion-toggle {cursor: pointer;} 
 
    .accordion-content {display: none;} 
 
    .accordion-content.default {display: block;} 
 

 
.pHeader { 
 
\t font: 16px Arial, Helvetica, sans-serif; 
 
\t color: #555; 
 
\t text-transform: none; 
 
\t text-indent: 0px; 
 
\t letter-spacing: normal; 
 
\t word-spacing: 0px; 
 
\t white-space: normal; 
 
\t font-size-adjust: none; 
 
\t font-stretch: normal; 
 
\t margin-left: 0px; 
 
\t font-weight:normal; 
 
} 
 

 
.accordion-content p { 
 
\t font: 12px/16px Arial, Helvetica, sans-serif; 
 
\t color: #555555; 
 
\t text-transform: none; 
 
\t text-indent: 0px; 
 
\t letter-spacing: normal; 
 
\t word-spacing: 0px; 
 
\t white-space: normal; 
 
\t font-size-adjust: none; 
 
\t font-stretch: normal; 
 
\t margin-left: 10%; 
 
} 
 
\t 
 
.pUL { 
 
\t font: 12px Arial, Helvetica, sans-serif; 
 
\t color: rgb(102, 102, 102); 
 
\t text-transform: none; 
 
\t text-indent: 0px; 
 
\t letter-spacing: normal; 
 
\t word-spacing: 0px; 
 
\t white-space: normal; 
 
\t font-size-adjust: none; 
 
\t font-stretch: normal; 
 
\t margin-left: 60px; 
 
} 
 

 
.accordion-toggle hr { 
 
\t height: 1px; 
 
\t background-color: #ccc; 
 
\t margin-top: -1px; 
 
} 
 

 
.accordion-toggle i { 
 
\t font-size: 27px; 
 
\t color:#999; 
 
\t font-weight: bold; 
 
\t line-height: 15px; 
 
\t float: right; 
 
} 
 

 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<p style="font-size: 16px; width: 100%; text-align:center;">Frequent Asked Questions</p> 
 

 
<div id="accordion"> 
 
    <h4 class="accordion-toggle"> 
 
    \t <span class="pHeader">Products</span><i class="fa fa-angle-right fa-2x"></i> 
 
    <hr noshade /></h4> 
 
    <div class="accordion-content"> 
 
    <p style="font-weight:bold; font-size:14px;">Example 1</p> 
 
<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.</p> 
 
<hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> 
 
<p style="font-weight:bold; font-size:14px;">Example 2</p> 
 
<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.</p> 
 
    </div> 
 
    
 

 
    
 
    <h4 class="accordion-toggle" style="padding-top: 10px;"><span class="pHeader">Orders</span><i class="fa fa-angle-right fa-2x"></i><hr noshade /></h4> 
 
    <div class="accordion-content"> 
 
    <p style="font-weight:bold; font-size:14px;">Example 1</p> 
 
    <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. 
 
    </p> 
 
    <hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> 
 
    <p style="font-weight:bold; font-size:14px;">Example 2</p> 
 
    <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.</p> 
 
    <hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> 
 
    <p style="font-weight:bold; font-size:14px;">Example 3</p> 
 
    <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.</p> 
 
    
 
    </div> 
 
    
 
    
 
    </div>

Answer 1

Попробуйте это:

$(document).ready(function($) { 
    $('#accordion').find('.accordion-toggle').click(
     function() { 

      var selectedPanel = $(this).next(); 

      // Hides other panels 
      var otherPanels = $(".accordion-content").not(selectedPanel); 
      otherPanels.slideUp(0); 

      // Make other arrows turn right 
      var arrows = otherPanels.prev().find("i"); 
      arrows.removeClass("fa-angle-down"); 

      // Expands/collapses panel 
      selectedPanel.slideToggle(0); 
      $("i", this).toggleClass("fa-angle-down"); 

     } 
    ); 
}); 

Answer 2

Просто удалите фа-угол вниз от литий он будет делать со стрелкой вправо.

$(document).ready(function($) { 
    $('#accordion').find('.accordion-toggle').click(function(){ 
$("#accordion i").removeClass("fa-angle-down"); 
     //Expands/collapses panel 
     $(this).next().slideToggle(0); 
     $("i",this).toggleClass("fa-angle-down"); 

     //Hides other panels 
     $(".accordion-content").not($(this).next()).slideUp(0); 
     $(".accordion-content").find("i").not($(this).next()).toggleClass("fa-angle-down"); 


    }); 
    }); 

Demohttps://jsfiddle.net/1pwge6vr/