With the help of other members I have the following code that allows to show and hide divs one at a time.
If I click on a button it will show the corresponding div and if I click on another button, the previous div goes away and the next will show.
However, when I click on a button to show a div, it does not have any transition or timing effect. It shows up immediately
If in the function I add a timing like this.. $(id).show(800); It will have the transition or fadeIn effect, but if someone click on a button to show the div and click on the same button again to hide it, the div will go away and return right back.
Can someone help me to add that transition or fadeIn on a way that if the button is clicked to hide the div it will stay hidden?
This is what I have:
<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p>
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p>
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p>
<div class="fadeOut" id="div1" style="display:none"; >
<div class="fadeOut" id="div1" style="display:none"; >
<div class="container">
<p>This is the content of div1</p>
</div>
<div class="fadeOut" id="div2" style="display:none"; >
<div class="container">
<p>This is the content of div2</p>
</div>
<div class="fadeOut" id="div3" style="display:none"; >
<div class="container">
<p>This is the content of div3</p>
</div>
<div class="fadeOut" id="div4" style="display:none"; >
<div class="container">
<p>This is the content of div4</p>
</div>
var toggleDivs = function (id) {
$(".fadeOut").hide(800);
$(id).show();
}
you should disable all buttons untill the end of the animation:
var toggleDivs = function (id) {
$('.btn').attr('disabled', true)
$(".fadeOut").hide(800, function() {
$(id).show(800, function() {
$('.btn').attr('disabled', false);
});
});
}
I suggest you add another class to your buttons that are going to be disabled in order to not disable all buttons with class btn in the DOM.
Related
I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
I have a div which i want to toggle on click of a button. Its working but the div is not hiding on click of outside button. Below is my code pls check.
<div class='settings' ng-click="showDiv = !showDiv"></div>
<div class="profileSetting text-center" ng-show="showDiv">
<div></div>
<p class="small-font">Stephen Wilson <br/> steave#gmail.com</p>
<hr>
<p class="small-font"><img src = "images/settings.png" alt = "Generic placeholder thumbnail"> settings</p>
</div>
I want this profilesetting div should be hidden on click of outside.
I have the following code. I need to hide div 1 and display div2 when the button in div one is clicked. (In ANGULAR HTML5). I have a JS file with controllers etc. at the moement I have two diffetent html template files and I call these as separate modal pop up. Now instead of two pop ups, I need to just show only one pop up but just display or hide content from one of the divs.
<div id="div1">
<button name ="click" click="ClickMe()"/>
</div>
<div id = "div2">
<p> Some content</p>
</div>
This should toggle displayToggled on click, and remove the div from which the button was clicked from the DOM.
<div id="div1" ng-if="!displayToggled" >
<button name ="click" ng-click="displayToggled = true"/>
</div>
<div id = "div2" ng-if="displayToggled">
<p> Some content</p>
</div>
In your html
<body ng-app="myApp" ng-controller="myctrl as ctrl">
<div id="div1" ng-show="ctrl.btn">
<button name ="click" ng-click="ctrl.btn=!ctrl.btn"/>
</div>
<div id = "div2" ng-show="!ctrl.btn">
<p> Some content</p>
</div>
</div>
in your controller
.controller('myctrl', function(){
this.btn = true;
})
My target is make 2 divs and slide between them with buttons . also i need the focus one get The main ID So my code was :
HTML :
<button type="button" class="go">go</button>
<button type="button" class="back">back</button>
<div class="Wrapper">
<div class="Main" id="mainID">Main Content</div>
<div class="info">The Sympol kyes</div>
</div>
JQUERY:
$(".show").click(function(){
$('.Main').animate({right :'-300px'},500);
$('.info').animate({left:'0px'},500);
});
$(".back").click(function(){
$('.info').animate({left :'-300px'},500);
$('.Main').animate({right:'0px'},500);
});
Olease check the Live Example
the issue is when i press close its back very slow :(
and how the focus div take the id="mainID"
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......