Click on the image to resize the div accordingly

Question

Click on the image to resize the div accordingly

I have a scenario where I need to achieve the following functionality: Two divs are present, with an image inside the first div. When the image is clicked, the left div should resize, and the content on the right side should expand to show full page content. Clicking the image again should return the right side div to its original position. How can I implement this?

 <div style="border: 2px solid red;float:left;width:10%;height:400px "> <a href>Image Click</a></div>
<div style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

javascript jquery html css

Answer 1

Answer №1

To toggle between two classes, you can dynamically add or remove the class from the <div class="smaller"> tag based on user interaction. Here are sample class definitions:

.bigger
{
border: 2px solid Blue;
float:left;
width:50%;
height:500px
}
.smaller{
border: 2px solid red;
float:left;
width:10%;
height:400px; 
}

Answer 2

To toggle between two classes, you can dynamically add or remove the class from the <div class="smaller"> tag based on user interaction. Here are sample class definitions:

.bigger
{
border: 2px solid Blue;
float:left;
width:50%;
height:500px
}
.smaller{
border: 2px solid red;
float:left;
width:10%;
height:400px; 
}

Answer 3

Answer №2

If you haven't assigned any specific identifiers (id/class) to the image div, you may consider using the following code snippet:

$('div').find('a').on('click', function (e) {
   e.preventDefault();
   var height = $(this).closest('div').css('height');
   if (height === "400px") {
      $(this).closest('div').css('height', 'auto');
   } else {
      $(this).closest('div').css('height', '400px');
   }
});

Check out the Updated Demo here!

Answer 4

If you haven't assigned any specific identifiers (id/class) to the image div, you may consider using the following code snippet:

$('div').find('a').on('click', function (e) {
   e.preventDefault();
   var height = $(this).closest('div').css('height');
   if (height === "400px") {
      $(this).closest('div').css('height', 'auto');
   } else {
      $(this).closest('div').css('height', '400px');
   }
});

Check out the Updated Demo here!

Answer 5

Answer №3

Give this Code a Try

HTML Section

 <div id="fdiv" style="border: 2px solid red;float:left;width:7%;height:400px "> <a href>Click on the Image</a></div>
<div id="sdiv" style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to be displayed in full page</div>

JavaScript Portion

    <script type="text/javascript">
        $(document).ready(function () {
            var swidth=$('#sdiv').width();
$('#fdiv a').click(function (e) {
            e.preventDefault();

     var dupwidth=swidth;
            $('#sdiv').animate({ 'height': ($('#sdiv').height() == 500) ? 700 : 500 ,'width': ($('#sdiv').width() == swidth) ? parseInt(dupwidth)*1.75 : swidth }, 200);

        });

        });

    </script>

VIEW DEMO HERE

Answer 6

Give this Code a Try

HTML Section

 <div id="fdiv" style="border: 2px solid red;float:left;width:7%;height:400px "> <a href>Click on the Image</a></div>
<div id="sdiv" style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to be displayed in full page</div>

JavaScript Portion

    <script type="text/javascript">
        $(document).ready(function () {
            var swidth=$('#sdiv').width();
$('#fdiv a').click(function (e) {
            e.preventDefault();

     var dupwidth=swidth;
            $('#sdiv').animate({ 'height': ($('#sdiv').height() == 500) ? 700 : 500 ,'width': ($('#sdiv').width() == swidth) ? parseInt(dupwidth)*1.75 : swidth }, 200);

        });

        });

    </script>

VIEW DEMO HERE

Click on the image to resize the div accordingly

Answer №1

Answer №2

Check out the Updated Demo here!

Answer №3

Similar questions

Transforming data from an HTML form into a PDF document - Tips for generating multiple outputs

The implementation of useState is not functioning properly when used within a parent useState function

Formik's handleSubmit function appears to be malfunctioning

Manipulating values within a multidimensional array using JavaScript

Combining TypeScript and JavaScript for efficient mixins

Utilize puppeteer by passing a function inside page.waitForFunction() for efficient automation processes

Preventing an RxJS Observable interval: A step-by-step guide

Error message: "PHP encounters an issue with jQuery due to absence of 'Access-Control-Allow-Origin' header"

Is there a way to enable Tail Recursion Optimization in TypeScript?

JavaScript code for the submit button to proceed or halt the form submission

No specified margin at the top of the website's header section

utilizing the setState function to insert an object into a deeply nested array

The issue of variable stagnation in Firefox content script while utilizing self.port.on

Methods for resolving a ViewStyle typescript issue in react native

Error message: "When namedPlaceHolder parameter is disabled, bind parameters must be in the form of an

Node js - Looping Through Loading

What is the best way to hide the input field when there are multiple parent classes present?

The section cannot be shown in a flex layout within a grid container

What could be causing the errors in my subscription function?

JavaScript struggles when dealing with dynamically loaded tables