the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected!

Below is my HTML code:

<div class="tools-bg">
    <div  class="tools">
    </div>
</div>
<div class="arrow"></div>
    <div class="picture-holder">
      <div class="allpartsofthepic">
       <div id="row1" class="tr">
        <div id="prt1" class="td"></div>         
        <div id="prt2" class="td"></div>
        <div id="prt3" class="td"></div>
        <div id="prt4" class="td"></div>
        <div id="prt5" class="td"></div>
        <div id="prt6" class="td"></div>            
        <div id="prt7" class="td"></div>         
        <div id="prt8" class="td"></div>
        <div id="prt9" class="td"></div>
        <div id="prt10" class="td"></div>
        </div>
      </div> 
  </div>

And this is my CSS code:

.tools-bg
{
    background: none repeat scroll 0 0 #ededed;
    float: left;
    height: 450px;
    width: 350px;
 }
.tools
{
    margin: 40px;   
}
.arrow
{
   background-color: #ccc;
    color: #666;
    font-size: 2em;
    height: 450px;
    float:left;
    padding-top: 167px;
    text-align: center;
    width: 50px;
    cursor:pointer;
}
.tr
{
    display:block;
}
.td
{
    width:278px; 
    height:265px;
    float:left;
}
.picture-holder
{
    float: left;
    overflow: hidden;
    height:450px;
    width:70%;
}
#prt1{ background-image:url("../image/01_01_01.png");}
#prt2{ background-image:url("../image/01_01_02.png");}
#prt3{ background-image:url("../image/01_01_03.png");}
#prt4{ background-image:url("../image/01_02_01.png");}
#prt5{ background-image:url("../image/01_02_02.png");}
#prt6{ background-image:url("../image/01_02_03.png");}
#prt7{ background-image:url("../image/01_03_01.png");}
#prt8{ background-image:url("../image/01_03_02.png");}
#prt9{ background-image:url("../image/01_03_03.png");}
#prt10{ background-image:url("../image/01_04_01.png");}

I believe the issue lies within my CSS, but I am struggling to resolve it. Any assistance would be greatly appreciated.

jqueryhtmlcss

Answer №1

To determine the width of the picture holder for the sliding animation, you can calculate it by subtracting the arrow's width from the total container width.

After that, you can apply CSS3 translates to create the animation effect.

$(function(){
  var totalWidth = $(document).width();
  var arrowWidth = $('.arrow').width();
  var holderWidth = totalWidth - arrowWidth;
  $('.picture-holder').width(holderWidth);
  $('.arrow').on('click', function(){
    $('body').toggleClass('slide-left');
  });
});
body{
  margin: 0;
  position: relative;
  overflow-x: hidden;
}
.tools-bg
{
    background: none repeat scroll 0 0 #ededed;
    float: left;
    height: 450px;
    width: 350px;
 }
.tools
{
    margin: 40px;   
}
.arrow
{
   background-color: #ccc;
    color: #666;
    font-size: 2em;
    height: 450px;
    float:left;
    padding-top: 167px;
    text-align: center;
    width: 50px;
    cursor:pointer;
    -webkit-box-sizing: border-box;
}
.tr
{
    display:block;
}
.td
{
    width:278px; 
    height:265px;
    float:left;
}
.picture-holder
{
    position: absolute;
    left: 50px;
    top: 0;
    overflow: hidden;
    height:450px;
    width: 70%;
    background: cyan;
    -webkit-transform: translate(350px, 0);
}

.slide-left .arrow,
.slide-left .tools-bg{
  -webkit-transform: translate(-350px, 0);
}

.slide-left .picture-holder{
  -webkit-transform: translate(0);
}

.tools-bg,
.arrow,
.picture-holder{
  -webkit-transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tools-bg">
    <div  class="tools">
    </div>
</div>
<div class="arrow"></div>
    <div class="picture-holder">
    <div class="allpartsofthepic">
     <div id="row1" class="tr">
        <div id="prt1" class="td"></div>         
        <div id="prt2" class="td"></div>
        <div id="prt3" class="td"></div>
        <div id="prt4" class="td"></div>
        <div id="prt5" class="td"></div>
        <div id="prt6" class="td"></div>            
        <div id="prt7" class="td"></div>         
        <div id="prt8" class="td"></div>
        <div id="prt9" class="td"></div>
        <div id="prt10" class="td"></div>
    </div> 
</div>

Answer №2

Revise your HTML in the following manner:

<div class="tools-bg" id="leftSideBar">
    <div  class="tools">
    </div>
</div>
<div class="arrow" onclick="collapse()"></div>
    <div class="picture-holder">
    <div class="allpartsofthepic">
     <div id="row1" class="tr">
        <div id="prt1" class="td"></div>         
        <div id="prt2" class="td"></div>
        <div id="prt3" class="td"></div>
        <div id="prt4" class="td"></div>
        <div id="prt5" class="td"></div>
        <div id="prt6" class="td"></div>            
        <div id="prt7" class="td"></div>         
        <div id="prt8" class="td"></div>
        <div id="prt9" class="td"></div>
        <div id="prt10" class="td"></div>
    </div> 
</div>

Incorporate the provided JavaScript code:

<script>
check = 1;
function collapse(){
    if(check == 1){
        check = 0 ;
        document.getElementById("leftSideBar").style.display = "none";
    }
    else {
        check = 1;
        document.getElementById("leftSideBar").style.display = "block";
    }
}
</script>

Answer №3

Let me lend a hand

Check out the Fiddle here

$(document).ready(function(){
$('.arrow').click(function(){
    $('.left').toggle("slide");
})

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

In the process of building a Single Page Application (HTML5) utilizing the following plugins: - Sammy.js - Knockout.js - Require.js - Jquery.js This app is designed for Android, iPhone, and Windows mobile devices. Many scenarios revolve around cli ...

javascriptandroidjqueryiosknockout.js

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

Issue with Rails: Content_For not functioning properly when combined with AJAX or when attempting to rehydrate JavaScript files

Currently, I am utilizing ajax to load all my views, and it's functioning perfectly except for one issue. My view pages that are being loaded are not referencing my JavaScript files. Below is an example of my coffee-script: jQuery(function() { Stri ...

javascriptjqueryruby-on-railsajax

Begin expanding new circles in jQuery from the exact location where the previous ones ended

A captivating circle animation unfolds before your eyes, featuring dark blue circles that materialize at random points and gradually expand. As these expanding circles cover more than half of the screen, their color shifts to a lighter shade of blue. Exper ...

jquerycss

Gather information from HTML elements that are updated with text dynamically via AJAX calls using Scrapy

My goal is to extract information about mobile phones listed on the 'amazon.in' website from the following link: here using scrapy. Below is the code I am using: from scrapy.spiders import CrawlSpider, Rule from scrapy.linkextractors import Lin ...

pythonhtmlajaxweb-scrapingscrapy

Unexpected token "," in jQuery UI autocomplete error

Using the autocomplete feature works perfectly on my PC. However, I encounter an error when trying to test it on a mobile device. Do I need to utilize jQuery mobile in order for jQuery to function properly on mobile devices? Error message on line 3 of th ...

javascriptjqueryjquery-mobileautocomplete

Is It Always Necessary to Specify a Width and Height for an Image?

Is it necessary to specify both the Width and Height of an image on a webpage for consistent display across all browsers, or is specifying just one sufficient? While it may appear fine on certain browsers, I want to double-check for accuracy. Appreciate ...

html

Tips for adjusting the background color of an ag-grid component in a React application

Looking to make a full background color change in ag-grid within a React application. Experimented with row cell style, but aiming for the entire grid background change. Here is my code snippet: { headerName: "Module Name", field: "ModuleName", ...

cssreactjsag-grid

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

Ways to adjust a column width to be equal to the full width

My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space. ...

htmlcss

use jquery to automatically invoke a function with the .animate method

I've hit a snag in my jQuery project and could use some help. I'm currently utilizing jQuery's .animate() function like so: $(".planeid").animate({top:'590px'},1000); with an initial top value of 0. Is there a way to initiate a ...

jquery

Having trouble activating the Tailwind CSS or Intellisense features

I'm having trouble getting my React app to properly style divs using Tailwind CSS. The intellisense feature doesn't suggest any styling options for me either. import './App.css'; function App() { return ( <div className="t ...

cssreactjstailwind-css

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

htmlcssprinting

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

Objective: To develop a Q&A Script using PHP, JavaScript, and jQuery that allows users to post questions and provide answers. Upon submitting a new answer, it should be stored in the database and automatically displayed in the answers section. Challenge: ...

phpjavascriptjqueryformssubmission

Refresh Bootstrap modal with Ajax update

I have implemented a modal for user profiles on my website. When the "Edit Profile" button is clicked, I want to populate the fields with existing data using Ajax. However, as I am new to Ajax, I am facing difficulties in making it work. Here is the struc ...

jqueryajaxbootstrap-modal

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

javascripthtmlcss

Angular issue: Unable to implement Bootstrap dropdown in navbar

I've successfully added popper.js, bootstrap, and jquery to my project. Here is my Angular json file configuration: "styles": [ "src/styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "script ...

jqueryangularbootstrap-4popper.js

Refreshing information within a table using Ajax Prototype

For my current project, I am utilizing PrototypeJS. I have implemented Ajax.PeriodicalUpdater to insert real-time data as required. However, I am facing an issue where the data is not getting replaced inside a specific table. Below is the HTML code snippet ...

javascripthtmlajaxprototypejs

Animating file transfer can be achieved using either JavaScript or CSS

My goal is to create a visual representation of file transfer, such as moving a file from one folder to another. I have successfully achieved this using JavaScript with the following code: <script type="text/javascript> var img; var animateR; var an ...

javascriptjquerycssjquery-animatecss-animations

Troubleshooting issue: Unable to edit images using PHP and jQuery ajax

I have been attempting to insert text onto my image using jQuery ajax, but I am encountering strange text in the ajax response and not getting the desired image output. Snippet of jQuery Ajax Code: $(document.body).on('click', '.certific ...

phpjqueryajaxphp-gd