first div selection pushes the second div element to the right on expanding

Question

davidjennings 0 Junior Poster in Training

11 Years Ago

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>

`

html-css javascript jquery

2 Contributors
3 Replies
358 Views
3 Days Discussion Span
Latest Post 11 Years Ago Latest Post by davidjennings

almostbob 866 Retired: passive income ROCKS

11 Years Ago

 #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

Reply to this topic

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.

davidjennings 0 Junior Poster in Training · Answer 1 · 2013-06-06T10:33:15+00:00

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

Any other suggestions

Thanks

D

davidjennings 0 Junior Poster in Training · Answer 2 · 2013-06-09T06:20:49+00:00

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>