Lubidia13 Lubidia13 - 27 days ago 6
CSS Question

Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

I'm trying to create a basic accordion pull down button, one that will display my information when clicked and then hide it when clicked again. I'm using html, css and js to accomplish this.

Based on an example from my prof, I have the following in js:

$('input[type=radio]+label').click(function(){
var lbl = $(this).html().substring(2);
var on = $(this).prev().attr('checked');
if(on){
$(this).html('▹ '+lbl);
}else{
$(this).html('▿ '+lbl);
}
$(this).prev().attr('checked',!on);
$(this).next().slideToggle();
});


the following css:

#work,
.closed {
display: none;
}

#work+label,
{
cursor: pointer;
color: blue;
}

section {
background-color: #eee;
padding: 20px;
margin-left:15px;
}


and the following in html:

<div class="text">


<input type="radio" id="work">
<label for"work">
<h3 class="work-text">OVERVIEW</h3>
</label>
<section class="closed">
<h3>
OVERVIEW:
</h3>
<p>
Highly creative electronic design and multimedia student with a passion and enthusiasm for Illustration and character design. Graphic artist skilled in a variety of design and logos.
</p>
</section>

</div>


Can someone help me figure out how to get rid of the &#9657 and &#9663? I don't want the arrows to be present when you click on the word OVERVIEW. I simply want to be able to click on the word, have the context pull down and then disappear when clicked again.

I've tried just removing the two from the code and replacing it with:

if(on){
$(this).html(' '+lbl);
}else{
$(this).html(' '+lbl);
}


and that seemed to work, but when I click on it more than a few times, I get the following type in place of my accordion pull down:

"h3 class="work-text">OVERVIEW"

How can I fix this problem?

Answer

Why don't you just remove the logic for showing the arrows entirely? Demo

$('input[type=radio]+label').click(function() {
   $(this).next().slideToggle();
});