Почему это приложение работает только в том случае, если я консоль регистрирую плохую переменную

Question

Я относительно новый с jquery, и я пытаюсь изменить стрелку вверх и вниз на js-аккордеоне на каждый клик, к сожалению, я столкнулся с ошибкой, он работает только в том случае, если I console.log - плохая переменная. Есть ли у кого-нибудь какие-либо указания относительно того, что я могу делать неправильно, когда я onclick = «embiggen (1)», например, если его аккордеон id один?

function arrowup(id){ 
$('#downarrow'+id).remove(); 
$('#dropdown'+id).append('</a>'); 
$('#dropdown'+id).append('<i id="uparrow'+ id +'" class="icon-1 icon-chevron-up">'); 
} 

function arrowdown(id){ 
$('#uparrow'+id).remove(); 
$('#dropdown'+id).append('</a>'); 
$('#dropdown'+id).append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down">'); 
} 


//Switches the arrows 
function embiggen(id){ 

var up = $('#uparrow'+id).length; 
if (up == 1){ 
    arrowdown(id); 
    console.log(i see you); 
} 
var down = $('#downarrow'+id).length; 
if (down == 1){ 
    arrowup(id); 
} 

} 

Answer 1

Проблема здесь:

$('#dropdown'+id).append('</a>'); 

Это должно быть так:

$('#dropdown'+id).append('<a/>'); 

незначительные изменения, но я просто проверял это и </a> не работает.

Кроме того, <i> нужен закрытый тег так:

.append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down"></i>') 

Answer 2

За комментариями, вот как сделать это с псевдо элементами. Я использую стрелки CSS, но вы можете просто дать им фиксированную ширину и высоту и использовать фоновое изображение в качестве значка.

Демо:http://jsbin.com/oyemaj/1/edit

HTML:

<div class="accordion"> 
    <h2>Lorem ipsum</h2> 
    <p>Porta est magna adipiscing...</p> 
</div> 

CSS:

.accordion h2 { 
    position: relative; 
    padding: .5em; 
    background: #ddd; 
    cursor: pointer; 
} 

.accordion h2:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: 10px; 
    margin-top: -5px; 
    border: 10px solid transparent; 
    border-top-color: blue; 
} 

.accordion h2.open:after { 
    margin-top: -15px; 
    border-color: transparent; 
    border-bottom-color: blue; 
} 

.accordion p { display: none } 

JQuery:

$('.accordion h2').click(function() { 
    $(this).toggleClass('open').next().slideToggle(); 
}); 

Йуп , это все jQuery, который вам нужен, если вы используете этот подход.