0

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>

`

2
Contributors
3
Replies
23
Views
4 Years
Discussion Span
Last Post by davidjennings
0
 #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

0

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

Any other suggestions

Thanks

D

0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.