I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening?
Below is the code snippet I am using:
[Fiddle][1]
[1]: http://jsfiddle.net/uwc89n36/1/
Ensure the image style has height:auto set;
$(document).ready(function() {
(function($) {
var allPanels = $('.accordion > span');
$('.accordion > .question').click(function() {
var _this = this;
$('.current > span ').slideUp()
if(!$(_this).parent().hasClass('current')){
$(_this).next('span').slideDown();
$('.accordion.current').removeClass('current');
$(_this).parent().addClass('current');
}else{
$(_this).parent().removeClass('current');
}
return false;
});
}
)(jQuery);
});.csr-area { margin-bottom: 32px; }
.csr-area .accordion {
border: 1px solid #cccccc;
margin-bottom: 15px;
}
.csr-area .accordion.current .question {
color: @red;
}
.csr-area .accordion .question {
color: #cccccc;
text-decoration: none;
font-weight: 600;
cursor: pointer;
display: block;
padding: 10px 18px;
}
.csr-area .accordion span {
display: block;
padding: 0px 18px 15px 18px;
}
.csr-area h2 {
color: #ff0000;
margin-bottom: 32px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="csr-area">
<div class="content">
<div class="accordion">
<a class="question">Question</a><span style="display: none;"><h2>
Lorem Ipsum </h2>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" style="float:left; width:30%;">
<p>
[Text content here]
[More text content]
[Even more text content]
[Final text content]
</span>
</div>
</div>
</div>In my opinion, adjusting the dimensions of the image in pixels rather than percentage is a more effective method.
style="float:left; width:300px;height:500px;"
I encountered an issue with my code: setInterval(function() { $.ajax({ url: url, success: function(data, count){ var obj = jQuery.parseJSON(data); var content = obj.results[0].content; }}) }, 2000) The code runs every 2 seconds an ...
I am trying to implement a close button for my popup DIVs. Each one has a unique ID and I want to hide them by setting the CSS 'display' property to 'none' when closed. However, the following example is not functioning as expected. I a ...
Is there a way to rotate an image by 90 degrees, 180 degrees, and 360 degrees with the click of a button? <img class="test" id="image" src="images/image" alt="This is the Display Image" /> I attempted to use the following script, but was not satisf ...
Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...
Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to ...
I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...
I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...
Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...
Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...
I'm facing a challenge in setting the background color of a select element based on the color attribute of its currently selected option. I'm using Angular 4 for this task. An example of what I am attempting to accomplish is shown below: <se ...
I am attempting to create two columns of equal size, containing nested elements with large dimensions and adding overflow: scroll;. However, the column width is defaulting to 100%. Interestingly, when I apply a small width to the column (), the issue is re ...
Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...
Check out my JavaScript program on this jsfiddle: http://jsfiddle.net/y3aragzc/ Take a look at the code snippet below: var desired_var = 'Three'; var datafort1 = ["One", "Two", "Three", "Four", "Five"]; var html = '<div>\ &l ...
My website incorporates Jump Links to navigate between page elements as part of an interactive User Guide. Everything functions properly on Firefox, IE, and Edge, but Chrome and Opera seem to disregard the 'padding'. Due to a fixed menu bar on t ...
Hello, I have integrated Adam Shaw's Full Calendar plugin into my web application. While I am new to using json and understanding its functionality, I am facing difficulty in fetching events from my database and displaying them on the calendar. If any ...
Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...
My colleagues and I are currently working on a CRUD application using .net mvc4. The project involves rendering dynamic content through jQuery based on customer choices. One challenge we face is the need to create multiple hidden inputs to pass additional ...
I have links in my application that redirect to external websites. For example, a link might look like this: <http://www.google.com'>>General Search<>. Users input the href and we dynamically create the link without any validation of it ...
I am attempting to enable my 4th checkbox automatically when there is a new value in the textbox (myinput). If the textbox is empty, I want to disable it. Currently, you have to tab out before the change event is triggered. Also, how can I check for an e ...
I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...