Home/ Questions/Q 7185101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:20:27+00:00

I am trying to Expand/Collapse a DIV . I am using a function to

  • 0

I am trying to Expand/Collapse a DIV. I am using a function to pass in the height I want it set to but it is not expanding or collapsing the DIV. Does anyone have any idea on what I have done wrong? JSFiddle

<html>
<head>
<style>
.podTitles{
    float:left;
    clear:none;
    font-size:12px;
    font-weight:bold;
    color:#3A3938;
    line-height:23px;
    margin-left:10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function changeheight(heightval) {
            var heightset = heightval + 'px';
            if(this.text == 'more')
            {
                $('#overviewtext').animate({ 'height': heightset }, 600);
                $(this).text($(this).text() == 'more' ? 'less' : 'more');
            }
            else if(this.text == 'less')
            {
                $('#overviewtext').animate({ 'height': '150px' }, 600);
                $(this).text($(this).text() == 'more' ? 'less' : 'more');
            }

        };
</script>
</head>
<body>
<div style="background-image:url('Images/RedPodHeader.jpg'); background-repeat:no-repeat; width: 360px; height:23px; background-color: red;">
<span class="podTitles">Overview</span>
<span style="float: right; padding-right: 10px;"><a href="javascript:;" onclick="changeheight(250);"id="morelink">more</a></span>
</div>
<div style="height: 150px; width: 338px; padding: 10px; border-bottom: 1px solid silver; border-left: 1px solid silver; border-right: 1px solid silver;" id="overviewtext"> </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Couple of changes in your script, DEMO here

    function changeheight(heightval, _this) {
    var heightset = heightval + 'px';
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        $('#overviewtext').animate({
            'height': heightset
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {

        $('#overviewtext').animate({
            'height': '150px'
        }, 600);

        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }

    return false;
};

    Markup change – added this as an argument to the fxn call,

    onclick="return changeheight(250, this);"
    • 0