How to toggle css visibility with Javascript - javascript

I am trying to create a FAQ page much like the one here: https://www.harrys.com/help
I want to create the effect where clicking a question will display an answer.
My code can be seen here: http://jsfiddle.net/8UVAf/1/
Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.
HTML:
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>
JS:
$(".question").click(function (argument) {
if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
document.getElementByID("answer").className = "display";
}
});

Basically your Javascript could be shortened to:
$(".question").click(function(argument) {
$(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});
In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:
<p class="answer hideinit">the answer</p>
See the fiddle here
Edit: Add Hide / Show
To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:
$(".question").click(function(argument) {
var el = $(this).parent().find(".answer");
if (el.hasClass("display")) {
el.removeClass("display").addClass("hideinit");
} else {
el.removeClass("hideinit").addClass("display");
}
});
See the fiddle here

Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:
$(".question").click(function() {
$(this).siblings().toggle();
});
Here's an updated JSFiddle.

Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).
Those issues aside, you can use jQuery's .next() method to help you with this particular problem:
$(".question").click(function (argument) {
$(this).next(".hideinit").removeClass("hideinit").addClass("display");
});
JSFiddle

$(".question").on('click',function() {
$(this).next().toggle();
});

Related

Copy and paste text from a div to another [jQuery]

I am trying to do a thing that seems easy to me but I'm not very familiar with javascript language and I can't find any documentation to do what I want.
Let's say I have a code like this:
<div id="sourceA">Text</div>
<div id="sourceB">Another</div>
<div id="destination"></div>
Let's say I click on the "sourceA" div, the text contained in it should go in the "destination" div.
Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?
Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:
$("#sourceA").click(function() {
$("#destination").html($(this).html());
});
HTML:
<div id="sourceA" class="source">Text</div>
<div id="sourceB" class="source">Another</div>
<div id="destination"></div>
JS:
$('.source').click(function(e) {
$('#destination').text($(e.currentTarget).text())
});
Take a look at this example
var copyContentToDestinationClickHandler = function(event) {
$('#destination').empty();
$('#destination').append($(event.target).text());
}
$('#sourceA').click(copyContentToDestinationClickHandler);
$('#sourceB').click(copyContentToDestinationClickHandler);
https://jsfiddle.net/7v5a6bsu/

Simplify a javascript code containing multiple entries

Can anyone help me simplify this code?
Right now, I have to add to this code whenever I upload a new entry.
I would like it to work so that there is just one script that will identify the element IDs ("#rolly" or "#lagrimas") and run a code (.toggle('show')) on an entry depending on its state.
Also please let me know if this is better done with php. Although I would prefer javascript if that's possible...
The javascript that I add to everytime there is a new profile upload is this:
jQuery(document).ready(function(){
jQuery("#rolly").toggle('show');
jQuery("#lagrimas").live('click', function(lagrimas) {
jQuery("#rolly").toggle('show');
});
jQuery("#rodrigo").toggle('show');
jQuery("#ferber").live('click', function(ferber) {
jQuery("#rodrigo").toggle('show');
});
jQuery("#michael").toggle('show');
jQuery("#cruz").live('click', function(cruz) {
jQuery("#michael").toggle('show');
});
jQuery("#rodolfo").toggle('show');
jQuery("#paladin").live('click', function(paladin) {
jQuery("#rodolfo").toggle('show');
});
jQuery("#rommel").toggle('show');
jQuery("#abadiano").live('click', function(abadiano) {
jQuery("#rommel").toggle('show');
});
});
While below is an example of one of the html entries (corresponding to the first javascript above):
[btn_default_disabled id="lagrimas" class="btn" value="show/hide" fomable_id=3 default='Select' disabled='Reserved']
<br>
<div id="rolly">[formidable id=3]</div>
You can use common classes and DOM traversal to make your code more DRY.
Also note that live() was deprecated a long time ago. It's even been removed from jQuery v3. I would strongly suggest you don't use it, and also look to upgrade your version of jQuery to at least 1.12.
$(".btn").on('click', function() {
$(this).next('.target').toggle();
});
.target { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="lagrimas" class="btn">Toggle</button>
<div id="rolly" class="target">rolly</div>
<button id="ferber" class="btn">Toggle</button>
<div id="rodrigo" class="target">rodrigo</div>
It's a bit unclear what do you mean by upload a new entry in the question. I'll answer your question based on guessing.
It seems like you have having a set of a div and a button associated with it.
To simplify the code, you should abstract out this relationship by using class, and then binding the jquery event using the class selector instead of using the id.
Sample as below.
$(function() {
$('.display').toggle('show');
$('.container').on('click', '.btn', function() {
$(this).siblings('.display').toggle('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<button class="btn" id="lagrimas">Click lagrimas</button>
<div class="display" id="rolly">
I am Rolly.
</div>
</div>
<div class="container">
<button class="btn" id="ferber">Click ferber</button>
<div class="display" id="rodrigo">
I am Rodrigo.
</div>
</div>

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Is it possible to position a div on top of another starting from the bottom using CSS?

I have a chat window made using HTML, CSS & JS. I want to position the message from bottom to top.
Example:
first message div at the bottom, 2nd message div on top of first an so on. Is it possible?
I can't imagine a pure CSS solution. But Using jQuery, if you already have this library for your project, you could write something this:
$(':button').click(function() {
var message = $('input[type=text]').val();
$('#chat').prepend('<div class="line">'+message);
});
Demo: http://jsfiddle.net/Vbd67/1/
**I changed the append to prepend according to the comment
I know that this is not an answer to your question, rather this is a better option that you should consider implementing in the chat window.
Newest comment should be at the bottom, that is how most basic chat windows work.
Next thing, you can do this all using css:
because such a design requires either use of table rows or list elements
Obviously you have to use javascript for using ajax, so that you can asynchronously fetch user records like messages and profile pic etc
CSS:
<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>
HTML STRUCTURE:
<table id="chat_window">
<tr id="message_row">
<td id="profile_pic"></td>
<td id="message"></td>
</tr>
</table>
OR USING LISTS:
<ul id="chat_window">
<li id="message_row">
<div id="profile_pic"></div>
<div id="message"></div>
</li>
</ul>
Now you have to just using javascript:ajax to fetch values and add a child:
If you are using table based chat-window, then you have to fetch the table id using javascript and add row element <tr> per value/message that you fetch.
If you are using list based chat-window, then you have to fetch the list id using javascript and add list element <li> per value/message that you fetch.
I am sorry if there are any typos I have less time.
You can do this using jQuery like;
var first = $('div > div:first-child');
first.appendTo(first.parent());
To deal with several elements, you can do this:
$('div > div').each(function() {
$(this).prependTo(this.parentNode);
});
Here is a working Live Demo.
You should use a combination of display:table-cell and vertical-align:bottom.
I use Sotiris's fiddle and fixed its CSS.
The HTML is
<div style="display:table; height:200px;">
<div style="display:table-row">
<div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
</div>
</div>
</div>
<input type="text"><input type="button" value="post">
​
And this is the JavaScript code
$(':button').click(function() {
var message = $('input[type=text]').val();
$('#chat').append( $('<div/>').text(message) );
});
​
Please let me know if there is a problem.
This is the fiddle
I kept searching for a better solution because table layout is always suspicious to me, but I found css-tricks article about it and they do the same as I do.. so I guess this solution is the right one.
ADDING - keep scroll to bottom code
Since new messages are coming at the bottom, we need to keep scroll to bottom.
I updated the fiddle link

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure
Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.
I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>
Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.
Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

Categories