Mixing
Image change when toggle on/off
1
My toggle is opening a menu and inside that menu I have two images. I want to change toggle between the 2 images, but couldn't do it properly.
Jquery
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});
});
HTML
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-off.png" class="size click-former"><img src="img/question-on.png" class="click1 size"></span>
<span class="text">Some Text Here</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
and in Css I hiding toggle on img.
.click1 {
display: none;
}
but a bit confused how to change it, on or off.
Update
JSfiddle
in the fiddle there two image 100x50 and 100x100 when my toggle on or off(background color changing) also want to change image too.
jquery html css
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
add a comment |
1
My toggle is opening a menu and inside that menu I have two images. I want to change toggle between the 2 images, but couldn't do it properly.
Jquery
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});
});
HTML
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-off.png" class="size click-former"><img src="img/question-on.png" class="click1 size"></span>
<span class="text">Some Text Here</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
and in Css I hiding toggle on img.
.click1 {
display: none;
}
but a bit confused how to change it, on or off.
Update
JSfiddle
in the fiddle there two image 100x50 and 100x100 when my toggle on or off(background color changing) also want to change image too.
jquery html css
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
1
add code onfiddleand provide link
– Bhargav Chudasama
Nov 20 '18 at 5:45
1
can you explain what it means to change image(if off as i understanddtnot shown so what you want to change)
– לבני מלכה
Nov 20 '18 at 5:49
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53
add a comment |
1
1
1
My toggle is opening a menu and inside that menu I have two images. I want to change toggle between the 2 images, but couldn't do it properly.
Jquery
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});
});
HTML
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-off.png" class="size click-former"><img src="img/question-on.png" class="click1 size"></span>
<span class="text">Some Text Here</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
and in Css I hiding toggle on img.
.click1 {
display: none;
}
but a bit confused how to change it, on or off.
Update
JSfiddle
in the fiddle there two image 100x50 and 100x100 when my toggle on or off(background color changing) also want to change image too.
jquery html css
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
My toggle is opening a menu and inside that menu I have two images. I want to change toggle between the 2 images, but couldn't do it properly.
Jquery
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});
});
HTML
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-off.png" class="size click-former"><img src="img/question-on.png" class="click1 size"></span>
<span class="text">Some Text Here</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
and in Css I hiding toggle on img.
.click1 {
display: none;
}
but a bit confused how to change it, on or off.
Update
JSfiddle
in the fiddle there two image 100x50 and 100x100 when my toggle on or off(background color changing) also want to change image too.
jquery html css
jquery html css
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
edited Nov 20 '18 at 6:02
Itay Gal
7,75552559
7,75552559
asked Nov 20 '18 at 5:39
user10378098
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
1
add code onfiddleand provide link
– Bhargav Chudasama
Nov 20 '18 at 5:45
1
can you explain what it means to change image(if off as i understanddtnot shown so what you want to change)
– לבני מלכה
Nov 20 '18 at 5:49
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53
add a comment |
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
1
add code onfiddleand provide link
– Bhargav Chudasama
Nov 20 '18 at 5:45
1
can you explain what it means to change image(if off as i understanddtnot shown so what you want to change)
– לבני מלכה
Nov 20 '18 at 5:49
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
1
1
add code on
fiddle and provide link– Bhargav Chudasama
Nov 20 '18 at 5:45
add code on
fiddle and provide link– Bhargav Chudasama
Nov 20 '18 at 5:45
1
1
can you explain what it means to change image(if off as i understand
dt not shown so what you want to change)– לבני מלכה
Nov 20 '18 at 5:49
can you explain what it means to change image(if off as i understand
dt not shown so what you want to change)– לבני מלכה
Nov 20 '18 at 5:49
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53
add a comment |
2 Answers
2
active
oldest
votes
0
You can use only one image and change the src in function $(".size").attr('src','https://via.placeholder.com/100x50'):
See fiddle:
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
See my edit :$(this).find(".size")
– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
|
show 7 more comments
1
I added id to both images. On your toggle function I'm also toggling both images.
$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386868%2fimage-change-when-toggle-on-off%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use only one image and change the src in function $(".size").attr('src','https://via.placeholder.com/100x50'):
See fiddle:
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
See my edit :$(this).find(".size")
– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
|
show 7 more comments
0
You can use only one image and change the src in function $(".size").attr('src','https://via.placeholder.com/100x50'):
See fiddle:
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
See my edit :$(this).find(".size")
– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
|
show 7 more comments
0
0
0
You can use only one image and change the src in function $(".size").attr('src','https://via.placeholder.com/100x50'):
See fiddle:
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
You can use only one image and change the src in function $(".size").attr('src','https://via.placeholder.com/100x50'):
See fiddle:
$(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl> $(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl> $(function(){
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
if($('.open .size').attr('src')=='https://i.stack.imgur.com/Oh6WR.png')
$(".open .size").attr('src','https://via.placeholder.com/100x50');
else
$(".open .size").attr('src','https://i.stack.imgur.com/Oh6WR.png');
});
}); dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width:100%;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #9ED6E2;
height:auto;
text-indent:10px;
line-height:20px;
color:#333;
font-weight:medium;
cursor:pointer;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
img{
width:100px;
height:100px;
}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt, dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
padding-top: 10px;
display: block;
}
dt > span.text {
flex-grow: 1;
}
dt > span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" class="size">
</span>
<span class="text">second dt only to example</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
edited Nov 20 '18 at 7:24
answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
answered Nov 20 '18 at 6:09
לבני מלכהלבני מלכה
9,7241726
9,7241726
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
See my edit :$(this).find(".size")
– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
|
show 7 more comments
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
See my edit :$(this).find(".size")
– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
actuallt It s works, but I am trying to use it on other dt too. and it changing all at once. I want to change just when I clicked it and when I click it again I want it to return the same. But it doesn't return same.
– user10378098
Nov 20 '18 at 6:30
1
1
See my edit :
$(this).find(".size")– לבני מלכה
Nov 20 '18 at 6:33
See my edit :
$(this).find(".size")– לבני מלכה
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
to explain it more I took same pic: here the first one it's normal: imgur.com/a/LfpgPrm and when I click it it changes unclicked button too:imgur.com/a/AcTA7Hv
– user10378098
Nov 20 '18 at 6:33
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
jsfiddle.net/r0jn8mve/16
– לבני מלכה
Nov 20 '18 at 6:36
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
thank you, it solved one problem. But when I click other item, first clicked not return first pic. clicked image stays. I am trying to do when click other item, first clicked return first image. I mean I doesn't toggle when I click other item.
– user10378098
Nov 20 '18 at 6:38
|
show 7 more comments
1
I added id to both images. On your toggle function I'm also toggling both images.
$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
add a comment |
1
I added id to both images. On your toggle function I'm also toggling both images.
$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
add a comment |
1
1
1
I added id to both images. On your toggle function I'm also toggling both images.
$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
I added id to both images. On your toggle function I'm also toggling both images.
$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">$(function() {
$(".accordion dt").click(function() {
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$("#open-image").toggle();
$("#close-image").toggle();
});
});dd {
margin: 0;
}
dl.accordion {
font-family: Helvetica Neue;
width: 100%;
font-size: 16px;
}
dl.accordion dt {
border-bottom: 1px solid #9ED6E2;
height: auto;
text-indent: 10px;
line-height: 20px;
color: #333;
font-weight: medium;
cursor: pointer;
}
.click1 {
display: none;
}
dl.accordion dt.open {
background-color: #9ED6E2;
color: white;
}
dl.accordion dd {
background: #FFF;
padding: 10px;
line-height: 1.5;
display: none;
}
dl.accordion dd.text {
padding-left: 10px;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: space-between;
}
dt>span {
padding-top: 10px;
display: block;
}
dt>span.text {
flex-grow: 1;
}
dt>span.image2 {
padding-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
<dt>
<span class="image">
<img src="https://via.placeholder.com/100x50" id="open-image" class="size">
<img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
</span>
<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>
<img src="https://via.placeholder.com/100x50">answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
answered Nov 20 '18 at 6:00
Itay GalItay Gal
7,75552559
7,75552559
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
add a comment |
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
it's work with a simple touch, thank you!
– user10378098
Nov 20 '18 at 6:08
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386868%2fimage-change-when-toggle-on-off%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you please make a fiddle
– Negi Rox
Nov 20 '18 at 5:40
1
add code on
fiddleand provide link– Bhargav Chudasama
Nov 20 '18 at 5:45
1
can you explain what it means to change image(if off as i understand
dtnot shown so what you want to change)– לבני מלכה
Nov 20 '18 at 5:49
I updated question, add some explanation and fiddle @NegiRox
– user10378098
Nov 20 '18 at 5:53