Hi all I am trying to resolve an issue when I select an expanding div, the first div selection pushes the second div element to the right. is there css fix or other to get this not to push div element to the right

Thanks in advance

D

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Show Hide Plugin</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style>

body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
#display { float:left;}
#slidingDiv, #slidingDiv_2{ height:100px;padding:20px;margin-top:10px;display:none;}
</style>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="showHide.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

   $('.show_hide').showHide({            
        speed: 300,  // speed you want the toggle to happen 
        //easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        //showText: 'View',// the button text to show when a div is closed
        //hideText: 'Close' // the button text to show when a div is open

    }); 

});

</script>
<div id="display">
 <a href="#" class="show_hide" rel="#slidingDiv"><img src="click.png"></a>
    <div id="slidingDiv" >
       <p> Fill this space with really interesting content.</p>
    </div>
</div>
<div id="display">
  <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="click.png"></a>
    <div id="slidingDiv_2">
       <p>Fill this space with really interesting content.</p>
    </div> 
 </div> 
</body>
</html>

`

 #slidingDiv_2{ height:100px;padding:20px;margin-top:10px;display:none;}
#slidingDiv{ height:100px;padding:20px;margin-top:10px;display:none;z-index:10;}

now div 1 will slide over div 2, z:indexes can be used to change the relative depth in the page, your javascript could also set the active div z-index higher programmatically so the active on always scrolls over the inactive, toggling between 0 and 10 . 10 is in front of 0, -10 is behind 0, 1 is the default, my memory is not good

Hi Almostbob thanks for your feedback - the css change has been added and nothing has changed.

Any other suggestions

Thanks

D

Hi all just posted how this was resolved

Thanks
D

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Show Hide Plugin</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style>

body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
.partner_image { float:left;}

.clear{clear: both;}

.partner_description {
  display: none;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="showHide.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

  $('.partner_image').click(function() {
    var id = $(this).attr('id');
    id = id.replace('partner_image_','');
    console.log(id);

    $('.partner_description').hide();

    var description = $('#partner_description_' + id);
    $(description).show();
  });

});

</script>
</head>

<body>



<div class="partner_image" id='partner_image_1'>
  <a href="#" class="show_hide" rel="#slidingDiv"><img src="click.png"></a>
</div>
<div class="partner_image" id='partner_image_2'>
  <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="click.png"></a>
</div> 
<div class="partner_image" id='partner_image_3'>
  <a href="#" class="show_hide" rel="#slidingDiv"><img src="click.png"></a>
</div>
<div class="partner_image" id='partner_image_4'>
  <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="click.png"></a>
</div> 
<div class="clear"><!----></div>
<div class='partner_description' id="partner_description_1" >
  <p>Fill this space with really interesting content 1.</p>
</div>
<div class='partner_description' id="partner_description_2" >
  <p>Fill this space with really interesting content 2.</p>
</div> 
<div class='partner_description' id="partner_description_3" >
  <p>Fill this space with really interesting content 3.</p>
</div>
<div class='partner_description' id="partner_description_4" >
  <p>Fill this space with really interesting content 4.</p>
</div> 
<div class="clear"><!----></div>
<div class="partner_image" id='partner_image_5'>
  <a href="#" class="show_hide" rel="#slidingDiv"><img src="click.png"></a>
</div>
<div class="partner_image" id='partner_image_6'>
  <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="click.png"></a>
</div> 
<div class="partner_image" id='partner_image_7'>
  <a href="#" class="show_hide" rel="#slidingDiv"><img src="click.png"></a>
</div>
<div class="partner_image" id='partner_image_8'>
  <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="click.png"></a>
</div> 
<div class="clear"><!----></div>
<div class='partner_description' id="partner_description_5" >
  <p>Fill this space with really interesting content 5.</p>
</div>
<div class='partner_description' id="partner_description_6" >
  <p>Fill this space with really interesting content 6.</p>
</div> 
<div class='partner_description' id="partner_description_7" >
  <p>Fill this space with really interesting content 7.</p>
</div>
<div class='partner_description' id="partner_description_8" >
  <p>Fill this space with really interesting content 8.</p>
</div> 
<div class="clear"><!----></div>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.