We Keep Coding

On image click hide the image and display a div with transition

I'm working on a search bar. First, the user will only be able to see the search icon. When the user clicks on the search icon then that search icon gets replaced with a div that contains a new search bar. I want that when the user click on the search icon the new div with a transition of 1 second in such a way that it looks like the new div was the expanded version of the search icon.
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();">
<br/><br/>
<script>
function toggle_div_fun() {
debugger;
document.getElementById("Search-Collapse").style.transition = "all 2s";
debugger;
var divelement = document.getElementById("Search-Collapse");
var searchelement =document.getElementById("Search-Expand");
var menusection =document.getElementById("menu-section");
var searchsection =document.getElementById("search-section");
if(divelement.style.display == 'none'){
divelement.style.display = 'block';
searchelement.style.display = 'none';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '30px';
}
else{
divelement.style.display = 'none';
searchelement.style.display = 'block';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '50px';
}
}
</script>

Display did not work with transition, you can use divelement.style.opacity = 0; to hide your div with effect
and do not forget set opacity for initiate set divelement.style.opacity = 1;
something like this:
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;" onclick="toggle_div_fun();">
<br/><br/>
<script>
document.onload = () => {
document.getElementById("Search-Expand").style.transition = "all 2s";
document.getElementById("Search-Collapse").style.transition = "all 2s";
document.getElementById("Search-Collapse").style.opacity = 1;
document.getElementById("Search-Expand").style.opacity = 1;
}
function toggle_div_fun() {
var divelement = document.getElementById("Search-Collapse");
var searchelement =document.getElementById("Search-Expand");
var menusection =document.getElementById("menu-section");
var searchsection =document.getElementById("search-section");
if(divelement.style.display == 'none'){
divelement.style.display = 'block';
searchelement.style.display = 'none';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '30px';
}
else{
divelement.style.display = 'none';
searchelement.style.display = 'block';
menusection.style.width = '65%';
searchsection.style.width = '15%';
searchsection.style.marginTop = '50px';
}
}
</script>

You can do that using CSS opacity in JavaScript simple event listener;
Check this detailed code below if you don't understand any things let me know and I'll try to explain it to you :D
HTML:
<img src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" id="Search-Collapse" style="cursor: pointer;">
<br>
<input type="text" id="Search-Input" placeholder="search query" />
CSS:
body {
background: red;
}
img {
width: 50px;
}
JS:
var searchIcon = document.querySelector('img');
var inputSearch = document.getElementById('Search-Input');
inputSearch.style.opacity = 0;
inputSearch.style.transition = "opacity 1s"
searchIcon.addEventListener('click', function(){
if(inputSearch.style.opacity == 0 || inputSearch.style.opacity == ''){
inputSearch.style.opacity = 1;
}
else {
inputSearch.style.opacity = 0;
}
});
and here is a working example on JSFIDDLE

if statement display none javascript correspond to library tags {{IMAGE}}

<div id="title1"><img src="a.jpg"></div>
<div id="title2"><img src="b.jpg"></div>
<div id="title3"><img src="c.jpg"></div>
<script type="text/javasctipt">
if ("{{IMAGE(z1)}}" = "") { document.getElementById('title1').style.display = "none"; }
if ("{{IMAGE(z2)}}" = "") { document.getElementById('title2').style.display = "none"; }
if ("{{IMAGE(z3)}}" = "") { document.getElementById('title3').style.display = "none"; }
</script>
I like to have these div tags title1, title2, title3 disappear when {{IMAGE(z1}}, {{IMAGE(z2}} and {{IMAGE(z3}} are not exist. These tags are the library tags for image uploads. In other words, When the image is not uploaded, these div tags will be display: none
But my javascript is not working, any idea why? Thanks in advance. Oh and Please I need this to be done in only Javascript, nojQuery please.
Source code example:
{{IMAGE(z1)}} is not uploaded,
<script>
if ("" = "") { document.getElementById('title1').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail2.jpg" = "") { document.getElementById('title2').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail3.jpg" = "") { document.getElementById('title3').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail4.jpg" = "") { document.getElementById('title4').style.display = "none"; }
</script>

Catch img tag and change image

I have one problem with javascript code. I know how to do using jQuery but I must use js for this. I need when someone click on first div to catch image "show.png" in first div and change it with another
I have HTML code like this (this repeat couple time with different ID)
<div class="clickdown" onclick="return toggleMe('p_202')">
<table>
<tr valign="top">
<td width="20px">
<img src="images/show.png" align="top" alt="" />
</td>
<td>
<b>textttext</b> <img src="images/btn_New.png" alt="" />
</td>
</tr>
</table>
</div>
<div id="p_202" class="clickdown_content" style="display: none;">
<p>
texttexttexttexttexttexttext
</p>
</div>
and exist Javascript code for expand and colapse second div.
function toggleMe(a) {
var e = document.getElementById(a);
if (!e) return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
FYI Don't tell me "This code are a..ul" - I know it but I have request just to add, not to change any.
So I can't add ID and use this with getElementByID()
I try something like this but that don't work (Here I'm hiding image just to see does ti work)
function toggleMe(a) {
var ttable = document.getElementsByTagName("table").item(0);
var ttr = ttable.getElementsByTagName("tr").item(0);
var ttd = ttr.getElementsByTagName("td").item(0);
vari = ttd.getElementsByTagName("img").item(0);
if (i.src == "images/btn_New.png") {
i.style.display == "none"
} else {
i.style.display = "block"
};
var e = document.getElementById(a);
if (!e) return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
Resume:
I must leave old code html and javascript and add new javascript code

It works:
function toggleMe(a) {
var ttable = document.getElementsByTagName("table").item(0);
var ttr = ttable.getElementsByTagName("tr").item(0);
var ttd = ttr.getElementsByTagName("td").item(0);
var i = ttd.getElementsByTagName("img").item(0);
if (i.src.indexOf("images/show.png") !== -1) {
i.style.display = "none";
} else {
i.style.display = "block";
}
var e = document.getElementById(a);
if (!e) return true;
if (e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
return true;
}
You have to use indexOf because in attribute src you have the whole url.
Plunker example
Image you can easy change in this way:
i.src = "images/newShow.png";

how to chang the style property in javascript?

I want to change a picture in my site every 5 second and I have used this code!but it does'n work!
where is the problem!
<script type="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
var interval = setInterval(time, 5000);
}); // ending ')' was missing
</script>
<script type="text/javascript">
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
var name= mm11.style.display.toString();
if ( name=="block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display.toString() ="block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
</script>

Change
if(m22.style.display.toString() ="block")
with
if(m22.style.display.toString() == "block")
Also, you don't need the "toString()", because display is already a string.
Here is a shorter code:
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
if (m11.style.display == "block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display == "block") {
m22.style.display = "none";
m11.style.display = "block";
}
}

Since you're already using jquery It seems to me that you can simply use
function time() {
$('#m1').toggle();
$('#m2').toggle();
}

You can directly use. Note that it should be == when comparing in If statement
document.getElementById('m1').style.display = 'none';

On the second if block, you miss-typed the comaprsion operator.
if(m22.style.display.toString() ="block")
Should be
if(m22.style.display.toString() =="block")

Better way is as follows:
HTML:
<div id="m1" style="display:block">Hello1</div>
<div id="m2" style="display:none">Hello2</div>
JS:
setInterval(time, 5000);
function time() {
$("#m1, #m2").toggle();
}
Refer LIVE DEMO
UPDATED:
As per #Sarah sh comment, you need to show images one by one.
Here is your functionality.
HTML:
<div class="img">Hello1</div>
<div class="img">Hello2</div>
<div class="img">Hello3</div>
<div class="img">Hello4</div>
JS:
var currObj = $(".img").first();
$(currObj).show();
$(".img").not(currObj).hide();
setInterval(rotateImage, 2000);
function rotateImage() {
var tempObj = currObj;
if ($(tempObj).is(":last"))
currObj = $(".img").first();
else
currObj = $(currObj).next();
$(tempObj).hide();
$(currObj).show();
}
Refer LIVE DEMO

Control javascript hide/show div with radio controls without jquery

The code below doesn't seem to work
//javascript
function t_show() {
if(document.getElementById("t_show").checked == true){
if(document.getElementById("t_show").value == 1) {
showDiv("t_settings");
}
} else {
hideDiv("t_settings");
}
}
function show(show){
var s = document.getElementById(show);
if(!s) return true;
s.style.display="";
return true;
}
function hide(hide){
var h = document.getElementById(hide);
if(!h) return true;
h.style.display="none";
return true;
}
//html
Text show:
<input type="radio" name="t_show" value="1" checked="checked" onchange="t_show(); update_preview();" id="t_show">Yes
<input type="radio" name="t_show" value="0" onchange="t_show(); update_preview();" id="t_show">No
<div id="t_settings">This content is to be shown if the show text is enabled.</div>

You <div/> has a class of t_settings but you are calling getElementById()
You are calling showDiv() but the function name is actually show()
You are calling hideDiv() but the function name is actually hide()
Instead of doing s.style.display = ""; use s.style.display = "block";
document.getElementById("t_show").value == 1 will always be true, you can just simplify it to use document.getElementById("t_show").checked
An id needs to be unique per the dom. there should only be one t_show per page.
Putting all that together you end up with this:
function showDiv(show) {
var s = document.getElementById(show);
if (!s) {
return true;
}
s.style.display = "block";
return true;
}
function hideDiv(hide) {
var h = document.getElementById(hide);
if (!h) {
return true;
}
h.style.display = "none";
return true;
}
function t_show() {
if (document.getElementById("t_show").checked) {
showDiv("t_settings");
}
else {
hideDiv("t_settings");
}
}
Code example on jsfiddle.

You have a few problems there. Mark already pointed out most of the obvious ones. I'd add that you should always have just one element with a unique ID (even radio buttons).
Also, you don't need two JavaScript functions for the (almost) same activity.
I'd suggest this:
HTML:
Text show:
<input type="radio" name="t_show" value="1" checked="checked" onchange="t_show(); update_preview();" id="t_show_yes">Yes
<input type="radio" name="t_show" value="0" onchange="t_show(); update_preview();" id="t_show_no">No
<div id="t_settings">This content is to be shown if the show text is enabled.</div>
JS:
function t_show() {
if(document.getElementById("t_show_yes").checked == true)
setDisplay("t_settings", "");
else
setDisplay("t_settings", "none");
}
function setDisplay(id, value){
var o = document.getElementById(id);
if(!o)
return false;
o.style.display = value;
return true;
}
Example on jsFiddle: http://jsfiddle.net/ZptpP/
EDIT - As requested in the comments:
You could modify the t_show function to send an array of IDs to be hidden/displayed.
function t_show() {
var elements = new Array("t_settings","div1","div2");
if(document.getElementById("t_show_yes").checked == true)
setDisplay(elements, "");
else
setDisplay(elements, "none");
}
function setDisplay(elements, value){
var o;
for (var i = 0; i < elements.length; i++) {
o = document.getElementById(elements[i]);
if (o != undefined)
o.style.display = value;
}
return true;
}
See the updated fiddle: http://jsfiddle.net/ZptpP/1

In your show function, change...
s.style.display="";
to
s.style.display="block";

why don't invoke method "t_show()" with a boolean parameter like:
t_show(true);// for input with value = 1
...
t_show(false);// for input with value = 0
and function:
t_show(value) {
if(value == true){
showDiv("t_settings");
} else {
hideDiv("t_settings");
}
}
function showDiv(show){ }
function hideDiv(show){ }
so you don't need to check value...
bye