CODEWITHSUNDEEP
javascriptjquery
besto
besto

Reputation: 21

Toggle control - how to create plus minus button?

My toggle control is working, but I would like to add a plus-minus button: when content appears it becomes "-" and when content is hidden it changes to "+". Can you help please?

 <div class='toggle'>
    <h2>Read More</h2>
    <div class="togglebox">
      <div class="content">
        <h3>   
           <p>
              A new exciting way to broadcast your business to customers     
              A new exciting way to broadcast your business.Lorem ipsum 
           </p>
        </h3>
        <!--Content Here-->
      </div>
    </div>
 </div>

 <script>
   $(document).ready(function(){
       //Hide the tooglebox when page load
       $(".togglebox").hide();
        //slide up and down when click over heading 2
       $("h2").click(function(){
           // slide toggle effect set to slow you can set it to fast too.
           $(this).next(".togglebox").slideToggle("slow");
           return true;
       });
   });
 </script>

Upvotes: 2

Views: 8376

Answers (4)

MAK Ripon
MAK Ripon

Reputation: 1081

I have modified your script. You can try this 

<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).next(".togglebox").css("display");  
if(x=="block")
$(this).text("+ Read More");
else
$(this).text("- Read More");
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>

Upvotes: 2

user166560
user166560

Reputation:

Create a new element and insert it after the "Read More" heading:

var expand_button = document.createElement("A");
expand_button.attr("href", "#");
$(expand_button).text("+");
$(expand_button).click(function(event){
    event.preventDefault();
    $(".togglebox").slideToggle("slow");
    if ($(".togglebox").is(":visible")) {
        $(this).text("-");
    } else {
        $(this).text("+");
    }
});

$(expand_button).insertAfter("h2");

Upvotes: 0

jasalguero
jasalguero

Reputation: 4181

I made an example of an expandable list that has exactly that, maybe is useful:

http://jasalguero.com/ledld/development/web/expandable-list/

Upvotes: 1

Pragnesh Patel
Pragnesh Patel

Reputation: 1444

Please check out following tutorial easy toggle jquery tutorial You have to use css to change the header with + or -

HTML

    <h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
    <div class="block">
        <h3>Content Header</h3>
        <!--Content-->
    </div>
</div>

css

h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left;
}
h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
    margin: 0 0 5px;
    padding: 0;
    border-top: 1px solid #d6d6d6;
    background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
}
.toggle_container .block {
    padding: 20px; /*--Padding of Container--*/
    background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

jquery

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

});

Upvotes: 1

Related Questions