make div box shrink and grow with show and hide

[ianhaney]

Hi

I am currently building a website for a client and within the search form, I have more options which is a link that shows and hides more options to search by and it works perfect but I want the div box to shrink and grow when the more options link is clicked

my coding for the html and javascript is below

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >More Options</a>
<button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
<br />

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div style="float: right; margin: 0 0 0 10px;">
		<?php $doors = Params::getParam('doors') ; ?>
       <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
       <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
   		</div>
        
		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>
        
        <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
        </div>


<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

The CSS is below

.main-search {
	background-color: #f0f0f0;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #c9c9c9));
	background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
	width: 892px;
	padding: 6px;
	height: 138px;
	border: solid 1px #989393;
	margin: 0 auto;
	box-shadow: inset 0px 1px 1px 0px #fff, 0px 2px 2px 0px rgba(0,0,0,0.2);
	position: relative;
	margin-top: 15px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px
}

I believe it is to do with the height: 138px line but not 100% but have tried min-height, max-height, no height, height: auto and nothing seems to work

Please help as can't see where I am going wrong with it

Thank you in advance

[Beverleyh]

The css you've posted doesn't appear to be applied to any of the markup above (I can't see an element with that class).

If you need more help, please provide a link to your page.

[ianhaney]

The css you've posted doesn't appear to be applied to any of the markup above (I can't see an element with that class).

If you need more help, please provide a link to your page.

Hi Beverleyh

Thank you so much for the reply, appreciate it

So sorry, I have pasted below the whole coding that has the <div id="main-search"> in it

<div class="main-search">
            <div class="cell">
            <script type="text/javascript">
    $(document).ready(function(){
        $("#make").change(function(){
            var make_id = $(this).val();
            var url = '<?php echo osc_ajax_plugin_url("cars_attributes/ajax.php") . "&makeId="; ?>' + make_id;
            var result = '';
            if(make_id != '') {
                $("#model").attr('disabled',false);
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'json',
                    success: function(data){
                        var length = data.length;
                        if(length > 0) {
                            result += '<option value=""><?php _e("Select a model", 'cars_attributes'); ?></option>';
                            for(key in data) {
                                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
                            }
                        } else {
                            result += '<option value=""><?php _e('No results', 'cars_attributes'); ?></option>';
                        }
                        $("#model").html(result);
                    }
                 });
             } else {
                $("#model").attr('disabled',true);
             }
        });
    });
</script>
                <?php 
    $make  = Params::getParam('make') ;
    $model = Params::getParam('model') ;
    $type  = Params::getParam('type') ;

    $makes  = ModelCars::newInstance()->getCarMakes();
    $models = array();
    if($make != '') {
        $models = ModelCars::newInstance()->getCarModels($make);
    }

    $types = ModelCars::newInstance()->getVehiclesType(osc_current_user_locale());
?>
<select name="make" id="make" >
            <option value=""><?php  _e('Select a make', 'cars_attributes'); ?></option>
            <?php foreach($makes as $m) { ?>
                <option value="<?php echo $m['pk_i_id']; ?>" <?php if($make == $m['pk_i_id']) { echo 'selected'; } ?>><?php echo $m['s_name']; ?></option>
            <?php } ?>
        </select>
            </div>
            
            <div class="cell">
            <select name="model" id="model">
            <option value=""><?php _e('Select a model', 'cars_attributes'); ?></option>
            <?php foreach($models as $m) { ?>
                <option value="<?php echo $m['pk_i_id']; ?>" <?php if($model == $m['pk_i_id']) { echo 'selected';} ?>><?php echo $m['s_name']; ?></option>
            <?php } ?>
        </select>
            </div>
            
            <div class="cell">
            <?php if( osc_price_enabled_at_items() ) { ?>
        <fieldset>
                <input class="input-text" type="text" id="priceMin" name="sPriceMin" value="<?php echo osc_esc_html(osc_search_price_min()); ?>" size="6" maxlength="6" placeholder="Min Price"/>
                <input class="input-text" type="text" id="priceMax" name="sPriceMax" value="<?php echo osc_esc_html(osc_search_price_max()); ?>" size="6" maxlength="6" placeholder="Max Price"/>
        </fieldset>
        <?php } ?>
            </div>
            
            <div class="cell">
<input class="input-text" type="text" id="sCity" name="sCity" value="<?php echo osc_esc_html(osc_search_city()); ?>" placeholder="Town"/>
            </div>
            
            <div class="cell">
            <div class="select-box undefined" style="margin: 0 5px 0 5px; float: left;">
            <select name="distance">
            <option value="0" <?php echo (($_GET["distance"]) == 0) ? "selected" : ""; ?> >Distance</option>
            <option value="3" <?php echo (($_GET["distance"]) == 3) ? "selected" : ""; ?> >Within 3 Miles</option>
            <option value="5" <?php echo (($_GET["distance"]) == 5) ? "selected" : ""; ?> >Within 5 Miles</option>
            <option value="10" <?php echo (($_GET["distance"]) == 10) ? "selected" : ""; ?> >Within 10 Miles</option>	
            <option value="15" <?php echo (($_GET["distance"]) == 15) ? "selected" : ""; ?> >Within 15 Miles</option>
            <option value="25" <?php echo (($_GET["distance"]) == 25) ? "selected" : ""; ?> >Within 25 Miles</option>
            <option value="50" <?php echo (($_GET["distance"]) == 50) ? "selected" : ""; ?> >Within 50 Miles</option>
            <option value="75" <?php echo (($_GET["distance"]) == 75) ? "selected" : ""; ?> >Within 75 Miles</option>		
            </select>
            </div>
            </div>
            
            <div style="clear: both;"></div>
            
                <div class="cell" style="margin: 5px 0 0 0; float: left;">
            	<?php $transmission = Params::getParam('transmission') ; ?>
<input style="width:20px;" type="radio" name="transmission" value="MANUAL" id="manual" <?php if($transmission == 'MANUAL') { echo 'checked="yes"'; } ?>/> <label for="manual"><?php _e('Manual', 'cars_attributes'); ?></label>
<input style="width:20px;" type="radio" name="transmission" value="AUTO" id="auto" <?php if($transmission == 'AUTO') { echo 'checked="yes"'; } ?>/> <label for="auto"><?php _e('Automatic', 'cars_attributes'); ?></label>

<?php $fuel = Params::getParam('fuel') ; ?>
       <input style="width:20px;" type="radio" name="fuel" value="DIESEL" id="diesel" <?php if($fuel == 'DIESEL') { echo 'checked="yes"'; } ?>/> <label for="diesel"><?php _e('Diesel', 'cars_attributes'); ?></label>
<input style="width:20px;" type="radio" name="fuel" value="GASOLINE" id="auto" <?php if($fuel == 'GASOLINE') { echo 'checked="yes"'; } ?>/> <label for="auto"><?php _e('Gasoline', 'cars_attributes'); ?></label>

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >More Options</a>
<button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
<br />

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div style="float: right; margin: 0 0 0 10px;">
		<?php $doors = Params::getParam('doors') ; ?>
       <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
       <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
   		</div>
        
		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>
        
        <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
        </div>


<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

The link to the site is http://www.irhwebsites.com/sites/zacs-new-car-site/

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.main-search {
	background-color: #f0f0f0;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #c9c9c9));
	background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
	background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
	width: 892px;
	padding: 6px;
	height: 138px;
	border: solid 1px #989393;
	margin: 0 auto;
	box-shadow: inset 0px 1px 1px 0px #fff, 0px 2px 2px 0px rgba(0,0,0,0.2);
	position: relative;
	margin-top: 15px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px
}
/*]]>*/
</style></head>

<body>
 <a onclick ="javascript:ShowHide('HiddenDiv',500)" href="javascript:;" >More Options</a>
<button class="ui-button ui-button-big js-submit"><?php _e("Search", 'bender');?></button>
<br />

<div class="mid" id="HiddenDiv" style="DISPLAY: none;border:solid red 1px;overflow:hidden;" >
<div style="float: right; margin: 0 0 0 10px;">
		<?php $doors = Params::getParam('doors') ; ?>
       <input style="width:20px;" type="radio" name="doors" value="3" id="3" <?php if($doors == '3') { echo 'checked="yes"'; } ?>/> <label for="3"><?php _e('3 Doors', 'cars_attributes'); ?></label>
       <input style="width:20px;" type="radio" name="doors" value="4" id="4" <?php if($doors == '4') { echo 'checked="yes"'; } ?>/> <label for="4"><?php _e('4 Doors', 'cars_attributes'); ?></label>
   		</div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<input type="text" id="engine_size" name="engine_size" style="float: left;" placeholder="Engine Size"/>

        <input type="text" name="extColr" id="extColr" style="float: left;" placeholder="Colour"/>
        </div>

<script type="text/javascript">

function ShowHide(divId,ms){
 var obj=document.getElementById(divId),o=ShowHide[divId];
 if (!o&&obj){
  ShowHide[divId]=o={
   ud:obj.style.display=='none'
  }
  obj.style.display='block';
  obj.style.overflow='hidden';
  o.m=obj.scrollHeight;
  o.a=[obj,'height',o.ud?0:o.m];
 }
 if (o){
  ms=typeof(ms)=='number'&&ms>0?ms:500;
  obj.style.display='block';
  animate(o,o.a,o.a[2],o.ud?o.m:0,new Date(),ms);
  o.ud=!o.ud;
 }
}

function animate(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[2]=Math.max(0,n);
   a[0].style[a[1]]=a[2]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   a[0].style[a[1]]=t+'px';
   a[0].style.display=t==0?'none':'block';
  }
 }


</script>
</body>

</html>

[ianhaney]

Hi vwphilips

Thank you the coding etc, appreciate it

I tried the coding and the grey box still does not shrink and grow when click the more options link

[Beverleyh]

Might I suggest something like this http://fofwebdesign.co.uk/template/_...ss-ani-div.htm

The addClass() javascript function adds a class of "show" to the div with id "box" in the example, although you can specify any id to target via the 1st parameter, and any class to be added via the second parameter onclick="addClass('idToTarget, 'classToAdd')"

The addition of the new class allows you to change the style of the element with css - here I am using css to animate the max-height of the hidden box from 0 to 150px when the "show" class is added.

A second click removes the added "show" class (actually this demo removes all classes so be careful with that).

Maybe you could use the same method for your search box.?

[vwphillips]

I tried the coding and the grey box still does not shrink and grow when click the more options link

please post a link to where you are using the code

[ianhaney]

please post a link to where you are using the code

Hi vwphillips

The link where I am using the code is http://www.irhwebsites.com/sites/zacs-new-car-site/

The search form is at the top

[ianhaney]

Hi Beverleyh

Thank you will try that if can't get the current coding to work

[ianhaney]

Hi Beverleyh

Just tried the coding and replies and works perfect, thank you so much really appreciate the help and support

same for vwphillips thank you for the replies and coding and help, really appreciate it