Here's a super simple example I made of creating new divs when you click the spawn button.
http://jsfiddle.net/3fLn9v4e/
jquery
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = document.createElement('div');
my_div.className = 'movingdiv';
document.getElementById('container').appendChild(my_div);
});
$('#reset').click(function(){
$('#container').empty();
});
});
How can I make these divs smoothly slide in from the right hand side up to their resting position when they are created?
You don't need extra js to animate your divs.
Just use keyframes like this:
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = document.createElement('div');
my_div.className = 'movingdiv';
document.getElementById('container').appendChild(my_div);
});
$('#reset').click(function(){
$('#container').empty();
});
});
body{margin:0px;}
.spawndivs
{
display: inline-block;
width: 100px;
height: 50px;
background-color: gray;
float: left;
cursor: pointer;
text-align: center;
margin-bottom:5px;
}
.container
{
display: block;
background-color: blue;
height: 50px;
width: 100%;
margin-bottom:5px;
}
.movingdiv
{
height: 30px;
width: 50px;
background-color: red;
display: inline-block;
margin: 10px;
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: -200px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
to {
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
}
#reset-box{width:100%;clear:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spawndivs">
<p>spawn!</p>
</div>
<div id="container"></div>
<div id="reset-box"><button id="reset">Reset</button></div>
jsFiddle link: http://jsfiddle.net/AndrewL32/3fLn9v4e/2/
You can use .animate which allow you to perform some animation of an element.
JS
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = $('<div></div>');
my_div.addClass('movingdiv');
my_div
.appendTo('#container')
.animate({
left: "+=20",
opacity: 1
});
});
$('#reset').click(function(){
$('#container').empty();
});
});
And add a position: relative in your .movingdiv css class.
CSS
.movingdiv
{
position: relative;
opacity: 0;
height: 30px;
width: 50px;
background-color: red;
display: inline-block;
margin: 10px;
}
You can see the fiddle
Related
I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>
You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");
$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');
Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");
You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.
I asked this question yesterday, but I didn't use enough detail. I have this pop up code but I'm having trouble figuring out how to modify it for a once only action.
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
We were affected by the fire next door and will remain closed until further notice.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Code to produce a Javascript pop up on page load can be found here
Any help would be greatly appreciated. I'm not very good at this. How would I make this only appear once on page load?
Not sure if I fully understand what you mean by have the modal appear only once on page load. Is it that you want the modal to appear only on the first ever page load and not appear in any subsequent page reload? If so, then you can achieve this by using localStorage as follows
<script type='text/javascript'>
$(function () {
if (!localStorage['show-popup']) {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
localStorage['show-popup'] = disable
}
});
</script>
I made a simple web application which allow you to add dynamic divs to a container div.
You can see how the app is looking here :
Before resizing
As you can see, when you click the link "Image" in the left menu, it add a new div in the div container with the black background.
Theses dynamics divs add by this way can be dragged and resized by jQuery with the jQuery ui draggable and resizable method.
the draggable function works well, but not the resizable. It seem like the divs are dependents, and when you try to resize it, it depends of the size of the others dynamics divs.
Here is the illustration of what I try to explain :
After resize
Like you can see, I tried to resize the div2, but because I add the div1 first, the div1 been resized too.
I want to make all div independent so I can resize it even if it overlap another div.
Here is my codes :
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
var moveDiv = document.createElement("div");
moveDiv.className = 'encadrer';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
moveDiv.appendChild(titre);
para.textContent = prompt("Texte de l'image :");
para.className = 'centrerPara';
moveDiv.appendChild(para);
bg.appendChild(moveDiv);
$(function () {
$(".encadrer")
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
display: table-cell;
border: 1px solid white;
vertical-align: middle;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
/*----- Resizable ------*/
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0px;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0px;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-nw {
cursor: nw-resize;
height: 7px;
width: 7px;
top: -5px;
left: -5px;
}
.ui-resizable-se {
cursor: se-resize;
height: 7px;
width: 7px;
right: -5px;
bottom: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
height: 7px;
width: 7px;
top: -5px;
right: -5px;
}
.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 7px;
left: -5px;
bottom: -5px;
}
/*----------------------*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
I don't really know how to use the snippet system but you can see the code by this way :p
Sorry for the bad English and the var names.
I did some css and js changes to fix your problem:
Replace $(".encadrer") to $(moveDiv) because you don't want to call the plugin for all elements (.encadrer) in each time the user add an image.
The main problem was with the position of the images which was relative I changed it to absolut.
I removed the display:table-cell and vertical-align:middle. If you want to center the image you should do this using by following How to center absolute element in div.
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
//var moveDiv = document.createElement("div");
//moveDiv.className = 'encadrer';
//var titre = document.createElement("p");
//var para = document.createElement("p");
//titre.textContent = "Titre";
//titre.className = 'centrerTitre';
//moveDiv.appendChild(titre);
//para.className = 'centrerPara';
//moveDiv.appendChild(para);
var name = prompt("Texte de l'image :");
var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
$(bg).append(container);
container
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
/*display: table-cell;
vertical-align: middle;*/
border: 1px solid white;
position:absolute !important;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
Update
To get the content center inside the .encadrer you need to:
Wrap the content with div
Follow the tutorial go to: Vertically-> Is it inline or inline-* elements (like text or links)?-> Is it multiple lines? -> see the second demo. You can see the final result here
html
<div id="speech"></div>
<div id="test"></div>
<div id="testt"></div>
css
/*speech bubble*/
.bubble {
position: relative;
width: auto;
height: 40px;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: sans-serif;
font-size: 15px;
display: inline-block;
left: 17px;
vertical-align: middle;
line-height: 40px;
max-width: 240px;
float: left;
clear: both;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 10px;
}
#test, #testt {
height: 100px;
width: 100px;
}
#speech {
height: 500px;
width: 200px;
float: right;
overflow-y: scroll;
background-color: #000;
}
javascript
$(document).ready(function () {
"use strict";
$("#test").click(function () {
$("#speech").append('<p class="bubble">test223123</p>');
});
$("#testt").click(function () {
$("#speech").append('<p class="bubble">test</p>');
});
});
When I click on "test" a few times, the speech bubbles that are appended into the speech div continues to go downwards but the scroll thing stays at the top.
How do i make it such that the scroll bar goes to the bottom whenever new speech bubbles are added?
Very simple, just use the scrollTop function. Add this single line:
$('#speech').scrollTop($('#speech').height());
You're now simply appending your bubble. When the bubble is appended, you find the height of your div and you use this value to scroll down.
I have made a little codepen where you can view all the code.
do not use height, but scrollHeight
$(document).ready(function () {
"use strict";
$("#test").click(function () {
$("#speech").append('<p class="bubble">test223123</p>').scrollTop($("#speech").prop("scrollHeight"));
});
$("#testt").click(function () {
$("#speech").append('<p class="bubble">test</p>').scrollTop($("#speech").prop("scrollHeight"));
});
});
I am trying to show a specific Paragraph when a specific div is clicked upon. I cannot get the jQuery to function the way I would like it to.
I want that if the ".Virus" div is clicked on, it shows the contents "v", if ".screenRepair" div is clicked on then it shows the ".screenInfo" contents
Any help would be appreciated.
HTML:
<div class="outerService">
<div class="service">
<div class="virus" style="width: 230px; height: 208px;">
<center>
<h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="images/Services/virus.jpg" alt="virus" height="140px"/>
</center>
</div>
<div class="information">
<p class="v">This is information</p>
<p class="screenInfo">hello</p>
</div>
<div class="screenRepair" style="width: 230px;">
<center>
<h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
border: 1px solid blue;
}
.service {
display: table;
height: auto;
max-width: 1044px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
}
#vInfo {
float: none;
width: 50%;
text-align: justify;
border: 1px solid #000;
display: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
.information p {
text-align: justify;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
jQuery
$(document).ready(function () {
$(".virus").click(function () {
$(".information .v").show();
});
});
With your current CSS you can try something like this:
$(document).ready(function() {
var $info = $( '.information' );
$(".virus").click(function() {
$info.show().find( 'p:not(.v)' ).hide().siblings().show();
});
$(".screenRepair").click(function() {
$info.show().find( 'p:not(.screenInfo)' ).hide().siblings().show();
});
});
Or you can slightly change your CSS and try to hide every P within .information instead of hiding .information itself.
Hope this helps.
change information div properties in your css (remove display:none)
.information {
margin-left: 10px;
border:3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
}
and add this lines to your css
.information .v {
display:none;
}
.screenInfo{
display: none;
}
Use Toggle if you want to show and hide div
Try something like this:
jQuery(document).ready(function(){
jQuery('#virus').live('click', function(event) {
jQuery('#information').toggle('show');
});
});
its working here is the JS Fiddle
$(document).ready(function() {
$(".virus").click(function() {
$(".information").show().find('p').show().next('.screenInfo').hide();
});
$(".screenRepair").click(function() {
$(".information").show().find('p').show().prev('.v').hide();
});
});
JSFiddle
Try something like this:
$(".service img").click(function () {
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
.hasClass() returns boolean true/false.
.toggle(true) results to show the hidden object while .toggle(false) results in hiding the object.
As suggested in the comments you need to hide all the infos rather than .information div. otherwise you need to show this one before showing any other info div.
Some other edits can be done like:
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
display: none; /*<-----add this to hide the info divs.*/
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
and then you can add one more line:
$(".service img").click(function () {
$(".information").show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
May be you want to look into this:
$(".service > div:not(.information)").click(function () {
$(".information").hide().show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).hasClass('virus'));
$(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});
Try this
$(document).ready(function () {
$(".virus").click(function() {
$(".information").show();
$(".v").show();
$(".screenInfo").hide();
});
$(".screenRepair").click(function() {
$(".information").show();
$(".screenInfo").show();
$(".v").hide();
});
});
see in live
$(document).ready(function() {
$('.virus').click(function() {
$('.information').show();
$('.v').show();
});
});
.information {display:none;} .information p{display:none;}