We Keep Coding

Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

There is a drop-down list, implemented approximately like this:
<ul>
<li>
<div class="block"></div>
<p>block 1</p>
<span>
<b>Here is some text</b>
<input type="text" placeholder="ENTER HERE">
</span>
</li>
<li>
<div class="block"></div>
<p>block 2</p>
<span>
<b>Here is some text</b>
<input type="text" placeholder="ENTER HERE">
</span>
</li>
</ul>
In the list there are some text, and input.
JS :
$(function(){
$('ul li').click(function(){
$('span', this).toggle();
});
});
Now the problem is, if you click on the input field, then the list will be closed immediately, how to avoid it?
Also, using css I added a triangle which when clicked should be rotated 180 degrees, what is the best way to implement this?
Here, example on jsfiddle
Thank you google translater =)

Check JsFiddle: https://jsfiddle.net/z8c7effx/14/
I added
$('input[type=text]').click(function(event){
event.stopPropagation();
});
to prevent event propagation, to prevent closing of li.
Also added rotation of the arrow using following css class.
.selected
{
transform: rotate(270deg);
transform-origin: 20px 8px;
}

Try it:
<input type="text" onclick="Focus()"/>
<script>
function Focus(){
var dropDownList = document.getElementById("yourDropdownId")style.display="block";
}
</script>

About problem with drop-down - update javascript to this:
$(function(){
$('.block').click(function(){
var target = $(this).parent();
$('span', target).toggle();
})
})

you could check the event target, and let the span toggling only when user click the caret
modified example
$(function(){
$('ul li').click(function(e){
if($(e.target).hasClass('block')){
$('span', this).toggle();
}
});
});

Your main problem is the generic nature of your click selector. Clicking on an input element allows the click event to bubble up to the original li element, thus toggling the li. You can check to see if the target matches the li element or not, and then toggle accordingly:
$('ul li').click(function(e){
if (e.target == this)
$('span', this).toggle();
});
JS Fiddle

you can use this function i made it
$(function(){
var container=$("input");
$('ul li').click(function(e){
if(!container.is(e.target))
$('span', this).toggle();
})
})
this will check whether the cick target is input or not . and toggle it on the basis of this

This happens because of the toggle() function on all li elements. Even if you click on the input element this will be triggered. There is something called event bubbling and event capturing -> just google it :D
You can stop this event mechanics on many ways. I think this could be the easiest way:
$('input').click(function(e){
e.stopPropagation();
})
Mahesh Chavda was faster :(

$(function(){
$('ul li').click(function(){
$('span', this).toggle();
if($("#input1").is(":focus")){
$("#span1").show();
}
if($("#input2").is(":focus")){
$("#span2").show();
}
else{
//no focus for input and textarea
}
});
});
.block {
background: red;
position: relative;
}
.block::after {
content: '';
position: absolute;
border: 15px solid transparent;
border-top: 20px solid red;
}
ul span{
display:none;
}
ul li{
padding:10px;
border: 1px solid grey;
list-style: none;
}
ul{
margin: 0;
padding:0;
}
ul p{
display: inline-block;
padding-left: 50px;
margin: 0;
}
b{
padding:30px;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<ul>
<li>
<div class="block"></div>
<p>Блок 1</p>
<span id="span1">
<b>Тут много текста</b>
<input type="text" id="input1" placeholder="ENTER HERE">
</span>
</li>
<li>
<div class="block"></div>
<p>Блок 2</p>
<span id="span2">
<b>Тут много текста</b>
<input type="text" id="input2" placeholder="ENTER HERE">
</span>
</li>
</ul>

Javascript checkbox toggle div hide show

I am looking to have a checkbox (Football) that when
Unchecked:
displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV (FootballChecked) that contains an alternate label image
shows another hidden DIV (FootballTeams).
When unchecked again, this needs to return to it's original state.
Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?
Thank you in advance.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="FootballTeams"){
$(".FootballTeams").toggle();
$(".FootballChecked").toggle();
$(".FootballChoice").toggle();
}
});
});
</script>
.FootballChecked {
display: none;
}
.FootballChoice {
display: show;
}
.sport {
display: none;
border: 1px dashed #FF3333;
margin: 10px;
padding: 10px;
background: #003366;
}
<input id="Football" type="checkbox" value="FootballTeams">
<div class="FootballChoice">
<label for="Football" class="FootballChoice">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';" onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football">
</label>
</div>
<div class="FootballChecked">
<label for="Football">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football">
</label>
</div>
<div class="sport FootballTeams">
Football Teams here
</div>

Do you have to use JavaScript? You could use the CSS Pseudo-selector :checked and the General Siblings Selector to display elements based on whether the checkbox is :checked or not.
E.G:
#football {opacity:0.2;}
.checked {display:none;}
#football:checked ~ .unchecked {display:none;}
#football:checked ~ .checked {display:block;}
label {
display:inline-block;
border:1px solid blue;
padding:20px;
background:url(http://lorempixel.com/100/100/sports)
}
label:hover {
border-color:red;
background:url(http://lorempixel.com/100/100/cats)
}
div {border:1px dotted green;}
<input id="football" type="checkbox" value="1" />
<div class="unchecked">
Unchecked:
displays one DIV
<div id="FootballChoice">
(FootballChoice) containing a
<label for="football">label image for the checkbox that changes with mouseover</label>
</div>
</div>
<div class="checked">
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV
<div id="FootballChecked">
(FootballChecked) that contains an
<label for="football">alternate label image</label>
</div>
shows another hidden DIV .
<div id="FootballTeams">
(FootballTeams)
</div>
When unchecked again, this needs to return to it's original state.
</div>
http://jsfiddle.net/zpz3mvuv/

Add icons inside textbox area onfocus event, using bootstrap and javascript

Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.

One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea

This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>

JQuery tabs not switching

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

Toggle Between two Divs [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .
Current code in JS fiddle : http://jsfiddle.net/WSCBu/
I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .
here is HTML
<div class="blue"></div>
<div class="gray">
<p> Show --> </p>
</div>
<div class="orange">
<p> -- Hide </p>
</div>
Css
.blue{
height:100px;
width:250px;
background:#1ecae3;
float:left;
}
.gray{
height:100px;
width:100px;
background:#eee;
float:left;
}
.orange{
height:100px;
width:150px;
background:#fdcb05;
float:left;
}

As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:
$('.orange').hide();
$('.gray, .orange').on(
'click',
function()
{
$('.gray, .orange').toggle()
}
);
$('.orange').hide();
$('.gray, .orange').on('click',
function() {
$('.gray, .orange').toggle()
}
);
.blue {
height: 100px;
width: 250px;
background: #1ecae3;
float: left;
}
.gray {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.orange {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
<p>Show --></p>
</div>
<div class="orange">
<p>-- Hide</p>
</div>

DEMO
$('.orange').hide();
$('.gray p').click(function(){
$('.gray').hide();
$('.orange').show();
});
$('.orange p').click(function(){
$('.gray').show();
$('.orange').hide();
});
Shorter code with .toggle()
DEMO
$('.orange').hide();
$('.gray p,.orange p').click(function(){
$('.gray,.orange').toggle();
});

Use following js :
jQuery('.gray').click(function(){
jQuery(this).hide();
jQuery('.orange').show();
});
jQuery('.orange').click(function(){
jQuery(this).hide();
jQuery('.gray').show();
});
Here is the working fiddle : http://jsfiddle.net/WSCBu/6/

Similar to above answer:
$('.gray').click(function () {
$(this).toggle();
$('.orange').toggle();
});
$('.orange').click(function () {
$(this).toggle();
$('.gray').toggle();
});
Demo.

$(".gray").click(function(){
$(".gray").toggle();
$(".orange").show();
});
$(".blue").click(function(){
$(".blue").toggle();
$(".orange").show();
});
$(".orange").click(function(){
$(".blue").toggle();
$(".gray").toggle();
$(".orange").toggle();
});
DEMO

$('.orange').hide();
$(".gray p").click(function(){
$(".gray").hide();
$(".orange").show();
})
$(".orange p").click(function(){
$(".orange").hide();
$(".gray").show();
})

Add a class show to the two div and then you can use a toggle method. example http://jsfiddle.net/WSCBu/21/
shown here.
<div class="blue"></div>
<div class="gray show" style="display:none";>
<p> Show --> </p>
</div>
<div class="orange show">
<p> -- Hide </p>
</div>
$(document).on('click','.show',function(){
$('.show').toggle();
});

I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)
<style>
.blue{
height:100px; width:250px; background:#1ecae3; float:left; }
.gray{
height:100px; width:100px; background:#eee; float:left; }
.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>
<div class="blue"></div>
<div class="gray"> <p> Show --> </p> </div>
<div class="orange"> <p> -- Hide </p> </div>
<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});
$(".orange p").click(function() {
$(".gray").show()
$(".orange").hide();
} );
</script>