How can I make a ''spoiler'' but instead of a button there's a image? Here's the code I used.
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
It isn't necessary to use this code, I only want it to be an image instead of a button.
It's working fine with me: http://jsfiddle.net/48PBY/
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://pbs.twimg.com/profile_images/858514627/eppaa_bigger.jpg" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<a href="javascript:;" onclick="showSpoiler(this);" >
<img src="image/path"></a>
try this
Related
Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!
<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman active">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
I want to use an event listener to get every element on the page to respond to a keypush - however, I'm having problems replicating the Javascript code for each element, it just won't work.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
I want to use a different key - say 'KeyA' for a different element - say '.spiderman'. I've tried replicating the code above with these replacements, but this hasn't worked.
What's the best way to achieve this?
Your forgot to assign each separate div a classname. I added the names for all of them, but only tied in batman and spiderman (b and s keys). Try it out, and you can easily add the rest of them.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
console.log('B clicked')
}
if (e.code == 'KeyS') {
var tag = document.querySelector('.spiderman');
tag.classList.toggle('active');
console.log('S clicked')
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo ironman">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo thor">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman2">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo darkknight">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo avengers">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo wonderwoman">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman3">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
i've got 20/30 divs.
If i click on a button the onClick will tell the function to show welcomeDiv1
but it should also hide welcomeDiv2/3/4/5/6 etc..
Same with showing welcomeDiv7, then it needs to hide welcomeDiv1/2/3/4/5/6/8/9 etc..
Script:
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
^^ Now it actually should hide all divs named welcomeDiv.. expect welcomeDiv1
First code
<div class="websites">
<div id="welcomeDiv" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="welcomeDiv1" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
</div>
And second code
<a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
<script>
function showDiv() {
document.getElementById('welcomeDiv1').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
<script>
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>
You must use for loops, for example
function showDiv(div){
for (i = 0; i => 100; i++){
var x = document.getElementById('exampleDiv-' + i);
x.style.display = 'none';
//You can also use visibility to get animations work.
}
var y = document.getElementById('exampleDiv-' + i);
y.style.display = 'block';
}
You can refactor your HTML/Script. Persist target with the element, which can be later retrieved using Element.dataset property.
Learn to use addEventListener() to attach event handler.
Here is a sample snippet:
document.querySelectorAll('.button').forEach(function(element) {
element.addEventListener('click', function() {
var _this = this;
document.querySelectorAll('.welcome').forEach(function(welcome) {
if (_this.dataset.target == welcome.id) {
welcome.style.display = "block";
} else {
welcome.style.display = "none";
}
})
});
});
.welcome {
display: none
}
<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Also give each div a class WelcomeDiv. Then, you just hide the entire WelcomeDiv class and show the one you want. For example:
divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";
A simple and easy solution for you:
<a title='Project 1'class="text1" onclick="showDiv('welcomeDiv1')">Project 1</a>
<a title='Project 2' class="text1" onclick="showDiv('welcomeDiv2')">Project 2</a>
<div class="websites">
<div id="welcomeDiv1" style="display:none;" class="answer_list" >1</div>
<div id="welcomeDiv2" style="display:none;" class="answer_list" >2</div>
</div>
<script>
function showDiv(div_id) {
var divsToHide = document.getElementsByClassName("answer_list"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none"; // hide your divisions
}
document.getElementById(div_id).style.display = "block"; //show your division
}
</script>
Alright i fixed it my self, with some help of the lovely internet
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
And HTML 1:
<input id="tempDivName" type="hidden" />
<a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>
<a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>
<a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>
And html 2:
<div id="myDiv1" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv2" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv3" style="display:none;" class="answer_list" ><object data="cv/Practiced.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
If you are trying without a loop as you have n set of a and div(loop through more elements affects performance), then I would suggest to go with adding show class to the showing div
function showDiv(t) {
if (document.querySelector('.show'))
document.querySelector('.show').className = "welcome";
document.getElementById(t.dataset.target).className = "welcome show";
}
.welcome {
display: none;
}
.show {
display: block;
}
.button {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Using radio button
If you are trying without a loop as you have n set of a and div, then I would suggest to go with a hidden radio button method
function showDiv(t) {
document.getElementById(t.rel).click();
}
.answer_list {
display: none;
}
.webrad {
display: none;
}
.webrad:checked+.answer_list {
display: block;
}
.text1 {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<div class="websites">
<a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
<a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
<input id="welcomeRadio" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
<input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
</div>
I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more
Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>
You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});
$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});
I wrote a little complex code (Coz i am not an expert) to mage a gallery.. But i want to do it more simple.. Bellow is my code:
This is the buttons:
<div class="pic1">Image1</div>
<div class="pic2">Image2</div>
<div class="pic3">Image3</div>
This is the each image:
<div class="PicsHolder">
<div id="pic1" style="padding: 2px; margin: auto;">
<img src="image_gallery/1.jpg" alt="" width="100%" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic2" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/2.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 2!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic3" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/3.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 3!!!
<div style="clear:both;"></div>
</div>
</div>
</div>
And my JAvascript (and the complicated part)
<script type="text/javascript">
$(document).ready(function() {
var myString = window.location.href;
var finals = myString[myString.length - 1];
if (finals == "") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "1") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "2") {
$("#pic1").hide();
$("#pic3").hide();
$("#pic2").fadeIn("fast");
}
if (finals == "3") {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").fadeIn("fast");
}
});
</script)
<script type="text/javascript">
$(document).ready(function() {
var currentURL = window.location.href;
var p1 = "?id=1";
var p2 = "?id=2";
var p3 = "?id=3";
var p1url = window.location.href + p1;
var p2url = window.location.href + p2;
var p3url = window.location.href + p3;
$(".pic1").click(function() {
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
window.location.href = p1url;
$("#pic1").fadeIn("fast");
});
$(".pic2").click(function() {
$("#pic1").hide();
$("#pic3").hide();
window.location.href = p2url;
$("#pic2").fadeIn("fast");
});
$(".pic3").click(function() {
$("#pic1").hide();
$("#pic2").hide();
window.location.href = p3url;
$("#pic3").fadeIn("fast");
});
});
</script>
Is there any possibility to do all this jquery code more simple?
is there any possibility to make it more dynamic? I mean if i want to add more images
like this way:
Some text in Here Image 2!!!
The jquery code that i am using to calculate the images and generate the rest code?
Regards!