Hey guys, I have a simple question (hope is simple). I have created sort of an accordion but I need to something like if button is clicked, slide down the content and else if button is clicked again slide up the content, please find below what I have done so far. Thanks for your help in advance.
$('#experiences').click(function () {
var cb = function () {
$('#experiences').addClass('active');
$('#hiddenExperiences').slideDown();
$('#addExperiences').fadeIn();
return false;
}
closeFilters(cb);
return false;
});
$('.btn-close').click(function () {
var cb = function () {
return false;
};
closeFilters(cb);
return false;
});
function closeFilters(callbackFunc) {
$(".active").removeClass("active");
$(".add-filters").fadeOut(250);
$(".hidden-filters").slideUp("slow", callbackFunc);
}
<div class="heading" id="experiences">
<p>Experiences</p>
</div><!--heading-->
<div class="filter">
<div class="hidden-filters" id="hiddenExperiences">
<p>Filtering by:</p>
<ul class="curr-filter"></ul>
</div><!-- hidden-filters -->
<div class="add-filters extra-width" id="addExperiences">
<div class="inner">
<h4 class="title-filtery">Filtery By:</h4>
<div class="btn-holder clearfix">
<input type="button" class="btn-update" value="" />
</div>
</div>
</div><!-- filters -->
</div><!-- filter -->
See this method
http://api.jquery.com/slideToggle/
and this event
http://api.jquery.com/toggle-event/
You can perform this in Javascript onClick of the button something like this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Looks like you're adding the .active class to all elements with id=experiences
$('#experiences').addClass('active');
You need to find the element that got clicked and pass that through.
var tgt;
$('#experiences').click(function (event) {
tgt = $(event.target);
var cb = function () {
$(tgt).addClass('active');
$('#hiddenExperiences').slideDown();
$('#addExperiences').fadeIn();
return false;
}
closeFilters(cb);
return false;
});
I'm not sure how your expand works, but that's where you're going to need to look.
I used this is another project I was doing, it may be of some assistance
JS:
$('.container .ui-widget-header').click(function(){$(this).parent().children('.ui-widget-content').slideToggle()});
HTML:
<div class="container">
<div class="ui-widget-header">Title</div>
<div class="ui-widget-content">Content</div>
</div>
<div class="container">
<div class="ui-widget-header">Title2</div>
<div class="ui-widget-content">Content2</div>
</div>
Related
I would like the .box elements to show/hide based on the words the user searches for, so for example if a user types in 'Title2 Title1' because those words exists inside box one and two they will remain visible with the renaming .box elements hiding. All the text within the .box elements needs to be searchable not just that in the .title element.
Below is how far I've got. It's almost there but it's not quite working as hoped.
Any help would be great.
Many thanks.
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
<script>
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')')) {
$(this).show();
} else {
$(this).hide();
}
});
});
} else {
$(".box").show();
}
});
</script>
You need to use a different search method. :contains does not work as you expect. Consider the following example.
$(function() {
function filter(e) {
var term = $(e.target).val();
if (term.length < 3) {
$(".box").show();
return;
}
$(".box").each(function(i, el) {
if ($(".content", el).text().indexOf(term) >= 0) {
$(el).show();
} else {
$(el).hide();
}
});
}
$("#search").keyup(filter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">Box title one content</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">Box title two content</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">Box title three content</div>
</div>
So for example if on is entered, no filtering is performed. If one is entered, the script will look inside the content class of each box and if one is found in the text, it will be shown otherwise, it is hidden. If the User clears their search out, all items are shown.
Hide all box before iterate, then only show when match any words:
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
// Hide all .box
$(".box").each(function () {
$(this).hide();
})
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')') ) {
$(this).show();
}
});
});
} else {
$(".box").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
Loop through all .boxs and using regex pattern matching, check either the title or content matches the search query. Show all matched boxes and hide all others
I have also fiddled it here
$("#search").on("input", function () {
var searchables=$('.box');
console.log(searchables)
var query=$(this).val();
searchables.each(function(i,item){
var title=$(item).find('.title').text();
var content=$(item).find('.content').text();
var rgx=new RegExp(query,'gi');
if(rgx.test(title) || rgx.test(content))
{
$(item).show();
}
else
{
$(item).hide();
}
})
})
Looking to remove a class if a certain button is clicked.
<div class="slide-container">
<section class="about" id="slide-0">
<div class="menu-total">
<nav class="nav">
<button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
<button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
<button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
<button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
<button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
</nav>
<div class="hamburger">
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
</div>
</div>
The one I want to remove the class on is the HOME button. So "slideTo('slide-2)". If it's clicked on the others then the class is kept. I believe someone is either wrong with my loop or not getting the ID correctly of the items/
function slideTo(slideId) {
const slide = document.getElementById(slideId);
slide.scrollIntoView({
behavior: 'smooth'
})
// above this line works fine
let nonHome = document.querySelectorAll('.slide-container section');
let nonHomeID = document.getElementById('slide-2');
var i;
setTimeout(function(){
for (i=0; i < nonHome.length; i++ ){
// i believe it's somewhere here it is wrong
if (nonHome[i].id != nonHomeID){
nonHome[i].classList.add("nav-visibility");
} else{
nonHomeID.classList.remove("nav-visibility");
}
}
}, 1000)
}
If you can use jquery library, you can write in the HTML:
<button class="nav_link" data-value="home">HOME</button>
...
and then in the JS code:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // Get the data-value clicked
$(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
var v = $(this).data("value");
if (v == valueClicked) {
$(this).removeClass("nav-visibility");
} else {
$(this).addClass("nav-visibility");
}
)
}
Not much simpler, but the HTML is cleaner.
Simpler version if it is not required to browse through all buttons at each button click:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // The value of the button clicked by the user
if (valueClicked == "home") {
$(this).removeClass("nav-visibility");
console.log('remove')
} else { $(this).addClass("nav-visibility");
console.log('add')
}
});
I'm trying to show MeetingDiv when IsAnonymous is checked and when IsMeeting is checked, MeetingTextBox should be shown.
Tried .click, .change and live and nothing worked. I don't know where I'm wrong.
<div class="col-md-4 sidePad" >
#Html.Label("Is Anonymous")
#Html.CheckBoxFor(p => p.IsAnonymous, new { id = "CBAnonymous"})
</div>
<div class="col-md-6" id="MeetingDiv" style="display:none">
#Html.Label("Is Meeting")
#Html.CheckBoxFor(p => p.IsMeeting, new { id = "CBMeeting"})
</div>
<div class="col-md-6" id="MeetingTextBox" style="display:none">
#Html.Label("Meeting Name")
#Html.TextBoxFor(p => p.MeetingName, new { id = "TBMeetingName"})
</div>
<script>
$(function () {
$("#CBAnonymous").click(function () {
if ($(this).prop("checked")) {
$("#MeetingDiv").show();
} else {
$("#MeetingDiv").hide();
}
});
});
</script>
Try this
$('#CBAnonymous').change(function(){
if(this.checked)
$("#MeetingDiv").show();
else
$("#MeetingDiv").hide();
I'm not actually a programmer but I have to do this website work properly. And for that I'll need your help.
I'm messing with some javascript and I manage to maek this:
<script>
function funcaosabores1() {
document.getElementById("testeagora1").innerHTML = "";
document.getElementById('contento1').style.visibility="visible";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores2() {
document.getElementById("testeagora2").innerHTML = "";
document.getElementById('contento2').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores3() {
document.getElementById("testeagora3").innerHTML = "";
document.getElementById('contento3').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores4() {
document.getElementById("testeagora4").innerHTML = "";
document.getElementById('contento4').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores5() {
document.getElementById("testeagora5").innerHTML = "";
document.getElementById('contento5').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
}
</script>
And I can't find on how to make for example: funcaosabores1 is clicked and is now visible, when I click funcaosabores2, the first one is hidden and the second is showing. But I can't click on the first one back because it was already clicked. (Idk if it's called return)
This is the div's called in the script:
<div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>
<div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>
This seems quite messy but I'm here if you guys can help me! Thanks.
The CodePen of how it is right now. #nielsdebruin
I think you just want to do something like this:
let prevButton;
let prevContent;
function toggle(e) {
if (prevButton) prevButton.style.visibility = 'visible';
prevButton = e.target;
e.target.style.visibility = 'hidden';
let id = e.target.id;
let number = id.slice(-1);
if (prevContent) prevContent.style.visibility = 'hidden';
prevContent = document.getElementById('contento' + number);
prevContent.style.visibility = 'visible';
}
<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>
<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>
I have a couple of functions that I've written in Angular to display multiple ng-show attributes on a page via scopes. I attempted to put all three into a single function using if else statements, but I couldn't get the function to fire for a second time. I'm wondering if there's a way to do this in a single function, and what the best practice for this sort of functionality is.
JS Fiddle is here - http://jsfiddle.net/ezy_/01L050mr/2/
Here's the JS that's currently spread across 3 different functions.
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.skillsState = false;
$scope.rolesState = false;
$scope.qualsState = false;
$scope.skillsStateTrigger = function() {
$scope.skillsState = true;
$scope.rolesState = false;
$scope.qualsState = false;
};
$scope.rolesStateTrigger = function() {
$scope.skillsState = false;
$scope.rolesState = true;
$scope.qualsState = false;
};
$scope.qualsStateTrigger = function() {
$scope.skillsState = false;
$scope.rolesState = false;
$scope.qualsState = true;
};
}
Do I need a $watch or $apply function to trigger updates if I set the function to fire from a single statesTrigger(resp) function?
Have a look here: updated with 1 function
$scope.triggerState = function (state) {
if (state == 'skills') {
$scope.skillsStateTrigger();
} else if (state == 'roles') {
$scope.rolesStateTrigger();
} else if (state == 'quals') {
$scope.qualsStateTrigger();
}
}
<button ng-click="triggerState('skills')">Skills</button>
<button ng-click="triggerState('roles')">Roles</button>
<button ng-click="triggerState('quals')">Quals</button>
You can even be more specific in the HTML itself like this: State variable
<body ng-app="app" class="ng-scope">
<div class="container ng-scope" ng-controller="AppCtrl">
<button ng-click="currentState = 'skills'">Skills</button>
<button ng-click="currentState = 'roles'">Roles</button>
<button ng-click="currentState = 'quals'">Quals</button>
<div class="row" ng-show="currentState == 'skills'" style="display: none;">
Skills State Active
</div>
<div class="row" ng-show="currentState == 'roles'" style="display: none;">
Roles State Active
</div>
<div class="row" ng-show="currentState == 'quals'" style="display: none;">
Quals State Active
</div>
</div>
</body>
Here is your refactor. The trick is to use an object to store the 3 states.
js:
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.states = {
skills: false,
roles: false,
quals: false
};
$scope.trigger_state = function(state) {
for(var i in $scope.states) {
$scope.states[i] = (i == state);
}
};
}
html:
<body ng-app="app" class="ng-scope">
<div class="container ng-scope" ng-controller="AppCtrl">
<button ng-click="trigger_state('skills')">Skills</button>
<button ng-click="trigger_state('roles')">Roles</button>
<button ng-click="trigger_state('quals')">Quals</button>
<div class="row" ng-show="states.skills" style="display: none;">
Skills State Active
</div>
<div class="row" ng-show="states.roles" style="display: none;">
Roles State Active
</div>
<div class="row" ng-show="states.quals" style="display: none;">
Quals State Active
</div>
</div>
</body>
In that case it's kinda a bad idea to use 3 states, you could use 1 one variable to store "state" = "mystate" for example (since the states are exclusive).