For the past few days, I've been struggling with a JavaScript issue as a newcomer to the language.
$(document).on('click', '.content-click', function(){
$(".content-click span").toggleClass("clicked"),
$(".content-view").toggleClass("viewed");
$(this).show();
});.content-click {
display: block;
width: 100%;
height: 2rem;
padding: 0.375rem 0.75rem;
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
cursor: pointer;
}
.content-click p {
display: inline;
margin: 0;
}
.content-click span {
width: 10px;
height: 10px;
position: relative;
top: 5px;
float: right;
vertical-align: middle;
background: url(../img/arrow.png) no-repeat;
transition: all 0.3s ease;
transform: rotate(0deg);
}
.content-click span.clicked {
transform: rotate(90deg);
} /*button click styling */
...
<div class="container">
<div class="content-click" style="margin:.25rem;">
<div id="content-1">
<p>First Item list...</p>
<span></span>
</div>
</div>
<div class="content-view">
<div id="view-1">
<p>Description...</p>
</div>
</div>
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>I noticed that when using the same class name as the .toggleClass target, clicking on one button causes all items with the same class to show their descriptions. It's a bit confusing, but please bear with me as I navigate this learning curve.