OK I have THREE count them (3) things I want to toggle using a Javascript or Jquery using bootstrap.
Fiddle not working CAN SOMEONE TELL ME WHY I got it to work locally and online.
JavaScript does work here in this example
Javascript
function toggleLink(obj)
{
var idCount = obj.id;
idCount = idCount.replace( new RegExp('cont', 'g'), '');
var elem = document.getElementById("show"+idCount);
var hide = window.getComputedStyle(elem, null).display =="none";
if (hide) {
elem.style.display="block";
}
else {
elem.style.display="none";
}
}
Simple CSS
[id^="show"] {
display: none;
}
HTML
<button class="btn btn-primary" id="cont1" href="javascript:void(0)"
onclick="toggleLink(this)">More </button><P><P>
<div id="show1">
CONTENT AREA #1</div><P><P>
<button class="btn btn-default" id="cont2" href="javascript:void(0)"
onclick="toggleLink(this)">More </button><P>
<div id="show2">
CONTENT AREA #2<p></div>
So what this does now is toggle the visibility of the DIV beginning with "show(i)" from any button or link with the beginning "cont(i)"
I want the following 3 things to toggle:
Toggle the content
Change the label or Text of the button from "More" to "Less"
Assign a different bootstrap button theme (default, primary, whatever)
Got a start any help much appreciated. TIA.
I hope you don't botter to use jquery, because I made a sample using it, take a look
The main piece that you need to pay attention is the follow code that are inside the toggleLink() function:
if($(obj).text()==='More'){
$(obj).text("Less");
$(obj).attr("class","btn btn-primary");
}else{
$(obj).text("More");
$(obj).attr("class","btn btn-default");
}
I'm using two functions of jquery:
text(): Used to change the text inside a html element, this only put text no more;
attr(): Change any attribute of an html element;
I hope this help you!
Related
I am designing one html page inside that I am using javascript also , what my requirement is when ever the page is loading the first div should be displayed when ever I click on that icon it should hide and it displays the second div content,for that please help me to fix the issue..
<div class="first">
<i class="fa fa-heart" onclick="toggle()" ></i>
</div>
<div class="second">
<b> I am from second div</b>
<div>
<script>
flag=true;
here I am not getting how to write the function to achieve my task
</script>
Your toggle function could be like this:
function toggle() {
var x = document.getElementsByClassName('second');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I would suggest using and id on the element instead of a class as it is explained here:
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
There are multiple ways you can do it. The 2 I normally use are:
Wrapping the icon into label and adding <input type="checkbox" />. This allows to achieve it without using any javascript at all, but it has a bit of complex css to it. You can check out this https://css-tricks.com/the-checkbox-hack/ for reference.
This is easy to do. You need to define .active { display: block } class in your css and in javascript you can write something like
function toggle() {
var element = document.querySelector(".second");
element.classList.toggle("active");
}
but before you need to make .second { display: none }
I am sure that there're more ways of doing this, but these are the 2 I use the most depending on the situation.
this is my script coding for left side menu slide left and right. I want to convert it into angularJS, I copied it from other website and unable to understand.
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeftPush = document.getElementById('showLeftPush'),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
function disableOther(button) {
if (button !== 'showLeftPush') {
classie.toggle(showLeftPush, 'disabled');
}
}
</script>
I can see that this code is some sort of toggle functionality. So let me try to explain how we can convert this!
The code starts at the onclick, so in angular that will be ng-click, also in angular you can write this in the HTML like so
<button id="showLeftPush" ng-click="test=!test;" ng-init="test=false;" ng-class="{'active': test, 'disabled': test}"></button>
In the above line, I will initialize test variable to false. then ng-click will toggle this variable. Then you are toggling the active class for the button. So the angular equivalent for that will be ng-class where the test will be a boolean, if test is true, then the class will be added. I do the same thing for disabled class also.
Similarly I add the other classes to the other element like.
Body HTML:
<body ng-class="{'cbp-spmenu-push-toright': test}" ng-controller='MyController' ng-app="myApp">
Div with ID - cbp-spmenu-s1:
<div id="cbp-spmenu-s1" ng-class="{'cbp-spmenu-open': test}">left</div>
Please use this as a starting point and continue building you angular App.
I have included a demo for your reference.
JSFiddle Demo
I am attempting to create a simple math quiz application for a child with on screen number keys that will append to an input field for the answer. I want to use jQuery event listener linked to a class so I do not have to call an onClick function for each number. I found this question elsewhere but I am unable to comment to further ask issue I am having as I have just joined stacked overflow and it states my reputation isn't high enough.
Link to other question: append value to an input field in JQuery
When I attempt to append I get an undefined when I attempt to click my buttons and I cannot see where the error in my code is. Any assistance would be greatly appreciated.
My jQuery:
$(".userIn").click(function() {
var usrIn = $(this).data('usrIn');
$("#answer").val(function() {
return this.value + usrIn;
});
});
Sample of my buttons:
<button type="button" class="btn btn-primary btn-block userIn" data-number="0" id="zero">0</button>
Here is the JSfiddle with all my linked style sheets and external js.
Change var usrIn = $(this).data('usrIn'); to var usrIn = $(this).attr('data-number');
Fiddle: https://jsfiddle.net/969r1gp0/4/
Your data attribute is called data-number, not data-userin, so you should write:
var usrIn = $(this).data('number')
But as the text of the buttons really is what you want to add, you could do without the data attributes all together, and just do:
var usrIn = $(this).text();
try this both, it's working
document.getElementById("input_id").value = you_value;
document.getElementById("input_id").textContent = you_value;
I have a form which uses jquery validation so every valid and invalid fields it applies some css classes. at the end I have submit and cancel buttons. Problem is cancel button. when I click on cancel all applied css and text in <span> tag has to be removed . SO here what I tried but its not working correctly
first is my generated <span> tag,
<span class="status" id="status">
<font color="red">Id in use</font>
</span>
Here is jquery script for cancel button,
$('#clearform').on('click', function () {
$("#create_teacher").validate().resetForm();
var myString = $("#tIdTextbox").html();
alert(myString);
var element = $(myString);
element.find("font").each(function(index) {
var text = "";
$(this).replaceWith(text);
});
$("#create_teacher").removeClass('success');
$("#create_teacher").removeClass('error');
$("#create_teacher").removeClass('valid');
});
can anyone help me in this please
If you are using jquery validator plugin then please try to replace
$("#create_teacher").validate().resetForm();
with
var validator = $("#create_teacher").validate();
validator.resetForm()
$('#clearform').on('click', function () {
$("#create_teacher").validate().resetForm();
//To remove all the css you have apply in span
$("#create_teacher").find("span").removeAttr('class');
//To remove all the text you have apply in span
$("#create_teacher").find("span").empty();
});
Can you try this.
$('span.error,span.valid,span.success').removeClass('success').removeClass('valid').removeClass('success').text('');
I am not sure what language or how to do this, but I am looking to have a word on a page, and when clicked, it will reveal more underneath. If it is clicked again, that stuff will hide away again? Any ideas?
Basically, you will need to manipulate the display CSS property of the element to be hidden/revealed:
<span id="showHide">Show</span>
<div id="foo" style="display:none">Here is some text</div>
<script>
document.getElementById("showHide").onclick = function() {
var theDiv = document.getElementById("foo");
if(theDiv.style.display == 'none') {
theDiv.style.display = 'block';
this.innerHTML = 'Hide';
} else {
theDiv.style.display = 'none';
this.innerHTML = 'Show';
}
}
</script>
I'd recommend javascript and using jQuery .show() & .hide() methods:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://www.learningjquery.com/2006/09/slicker-show-and-hide
you could do this with jQuery, here a ready to use example:
http://jsfiddle.net/8sDLg/
$(function() {$('div.more').hide()
$('a.showmemore').click(function(){
$(this).next('div').slideToggle()
})})
Put the stuff in a div with style display:none;. In the onClick handler of the word (can be link or a button), toggle the display style between '' (which means 'default') and 'none'
I created a demo for you here.
You could use jQuery for that and make your life easy:
Show/Hide
<div id="mydiv">Some content</div>
jQuery:
$(function(){
$('#link').click(function(){
$('#mydiv').slideToggle();
return false;
});
});
As can be seen, the slideToggle() does the trick there for you :)
Executive summary: use a framework plugin
Long version:
You could use javascript -- more likely in a combination with a javascript framework, like jQuery. This would involve adding a click handler to the word (actually a span tag around it) and having a way to retrieve the extra information to show as a tooltip -- there are plenty of plugins for this. Search for "jquery tooltip" here or using google: here's one example.
Alternatively, you could simply surround the word with the span tag and add a title attribute to the tag. Hovering over the word (actually the tag) would bring up the browser's default tooltip. This might be an easy way to get started with it -- in fact, this could be the start of the javascript solution. Using the tag for the click event and taking the data from the title attribute -- probably by storing the title in jQuery data on page load, then grabbing the text from the data on click so that you don't have a conflict with the browser's tool tip behavior. Many of the plugins operate this way.
Another elegant approach using pure HTML and CSS without JavaScript.
HTML:
here goes text before
<label class="details">
<input type="checkbox" /><span>here come some details</span><em> </em>
</label>
and after
CSS:
.details input,
.details span {
display: none;
}
.details input:checked~span {
display: inline;
border-bottom: dotted 1px gray;
}
.details em:after {
content: "show...";
}
.details input:checked~em:after {
content: "...hide";
}
Quick idea how to do it when avoiding a JS-only solution. I'm using jQuery here, because it is faster to code in, but as I mentioned above, if this is your only JS functionality it would only add a heavy-weight file for some trivial extras.
<script type="text/javascript">
jQuery(function() {
$(".article .additional")
.hide()
.before("<a href='#'>")
.prev()
.text("more")
.click(function() {
$(this).next().toggle()
})
});
</script>
<div class="article">
<h2>Some headline</h2>
<p>Some intro text that is always visible</p>
<div class="additional">
<p>Some extra text that is hidden by JS</p>
<p>But will stay visible if the visitor doesn't have JS</p>
</div>
</div>
As you see, the HTML is completely stand-alone. Only if JavaScript is supported, a "more" link will be added and the additional content hidden, so that non-JS users still can read all the text and don't have an useless "more" link.