CODEWITHSUNDEEP
jquerycsstwitter-bootstraptoggle
KooKoo Lic
KooKoo Lic

Reputation: 35

toggle collapse bootstrap/css icon using jQuery when a href link is clicked

I am new to bootstrap/css and jQuery. I have tried several solutions found here, but couldn't figure out what I did wrong.

I have a collapsible < div > pane, which is triggered by a "plus/minus icon" or a "course description link". Both triggers work great individually. However, I need to toggle the "plus/minus icon" when the "course description link" is clicked. Right now, the icon just stays the same when the link is clicked.

note: I'd prefer using the "btn icon" class, as it seems to make the icon display nicer.

HTML:

<div>
    <h4 id="show_pane">
        <span class="btn icon" data-toggle="collapse" 
             data-target="#wrapper_ABC100" id="plus_minus_icon"></span>
        <a id="course_link" href="#wrapper_ABC100" data-toggle="collapse" 
             data-parent="#wrapper_ABC100">ABC100 - Test Course 100</a>
    </h4>
</div>

<div id="wrapper_ABC100" style="height: auto;">
    <p>My collapsible pane - description for course ABC100</p>
</div>

Bootstrap/CSS:

/* Icon when the collapsible content is show */
.btn.icon:after {
    font-family: "Glyphicons Halflings";
    content: "\2212";
}

/* Icon when the collapsible content is hidden */
.btn.icon.collapsed:after {
    content: "\2b";
}

jQuery:

    $('#show_pane').click(function(){
        $('#course_link').toggle('1000');
        $("span",this).toggleClass("icon-circle-plus icon-plus-sign");
    });

Upvotes: 0

Views: 1690

Answers (1)

yjs
yjs

Reputation: 692

$(function() {
  $('#show_pane').click(function(){
        $(".btn.icon").toggleClass("collapsed");
        var paneDiv = $(this).find("a").attr("href");
        $(paneDiv).toggle('1000');
    });
  });
/* Icon when the collapsible content is show */
.btn.icon:after {
    font-family: "Glyphicons Halflings";
    content: "\2212";
}

/* Icon when the collapsible content is hidden */
.btn.icon.collapsed:after {
    content: "\2b";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

<div>
    <h4 id="show_pane">
        <span class="btn icon" data-toggle="collapse" 
             data-target="#wrapper_ABC100" id="plus_minus_icon"></span>
        <a id="course_link" href="#wrapper_ABC100" data-toggle="collapse" 
             data-parent="#wrapper_ABC100">ABC100 - Test Course 100</a>
    </h4>
</div>

<div id="wrapper_ABC100" style="height: auto;">
    <p>My collapsible pane - description for course ABC100</p>
</div>

Upvotes: 1

Related Questions