Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Toggling Elements with JavaScript

DZone's Guide to

Toggling Elements with JavaScript

·
Free Resource

  This function allows you to pass two variables that represent ID of two elements on your page. What you click on one of them it hide it and shows another one.

    
     
    Show Comments

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
\r\n \r\n Show Comments

\r\n
Now you can see the comments
\r\n","deleted":false,"likeStatus":{"liked":false,"score":0,"canLike":false},"zonetop":"","articleTags":[],"header":{"id":835758,"title":"Toggling Elements with JavaScript","imageUrl":"/themes/dz20/images/ArticleImg_2.jpg","link":"/articles/toggling-elements-javascript","imageLink":"/themes/dz20/images/ArticleImg_6.jpg","titleEll":"Toggling Elements with JavaScript","type":"article"},"url":"/articles/toggling-elements-javascript","isLocked":false,"draft":false,"articleContent":"","source":null,"modDate":1352061431000,"views":129,"isLimited":false,"tldr":null,"originalSource":"","articleType":"snippet"}]; WMODEL_DATA.perms = {"canDecidePick":false,"canPublish":false}; WMODEL_DATA.authenticated = false; WMODEL_DATA.firstArticleContent = null; WMODEL_DATA.isPreview = false; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('article.content', 'articleContent5', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'partners', data: true},{name: 'DEFAULT', data: true}], ' oUhbblYOaqbcblYOaqbcC', null); })(); (function() { function controller($rootScope, $scope, TH$Service, TH$LocalStorage, newsLetterPlugCreator) { $scope.subscriber = {email:$scope.userEmail == null? '' : $scope.userEmail}; $scope.submitted = false; var portal = $rootScope.model.portal; var newsletters = TH$LocalStorage.makeMap('newsletter.anon.subs').newsletter.anon.subs || {}; $scope.nonsusb = (portal) ? (newsletters[portal.id]) ? newsletters[portal.id] : false : true; $scope.examplePlug = newsLetterPlugCreator('weekly', null); $.fn.riseUp = function(e) { $(e).slideUp("slow")} $.fn.riseDown = function(e) { $(e).slideDown("slow")} var fold = $(window).scrollTop() + $(window).height(); $(window).scroll(function () { if ($(window).scrollTop() >= $(window).height()) { $scope.showEmailSubPanel(); } }); $scope.showEmailSubPanel = function(){ if($scope.minimized == null || $scope.minimized == false){ if($scope.subscribed == null || $scope.subscribed == false) { $.fn.riseDown($(".emailSubPanel")); $scope.minimized = false; } } } $scope.hideEmailSubPanel = function(element){ $(element).slideToggle(); $scope.minimized = true; } $scope.maximizeSubPanel = function(){ $scope.minimized = false; $scope.showEmailSubPanel(); } $scope.submit = function(e) { $scope.submitted = true; $scope.subscribed = true; $scope.showSubscribed = true; var key = portal.id; newsletters[key] = true; TH$LocalStorage.preference('newsletter.anon.subs', newsletters); TH$Service.exec('newsletters.subscribeEmail', {email: $scope.subscriber.email, portal: portal.id }).then(function (success) { if (success) { $scope.errors = false; setTimeout(function () { $(e).slideToggle(); }, 5000); }else{ delete newsletters[key]; TH$LocalStorage.preference('newsletter.anon.subs', newsletters); } }); if($scope.errors == null){ $scope.errors = true; } }; $scope.changeColor = function(color){ $scope.dockColor = {'background-color': color}; } $scope.showDock = function(){ return $scope.minimized; } }; var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('emailSubscriptions.popover', 'emailSubscriptionsPopover6', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbaTnfejsgpZntffWVcC', null); })(); (function() { function controller($scope, $service, $location, SideBarService, $timeout) { if ($scope.edition) { $scope.date = moment($scope.editionDate).utc().format('MMM DD, YYYY'); } SideBarService.ctx.pageSize = $scope.pageSize; SideBarService.ctx.isPreview = $scope.isPreview; SideBarService.ctx.mode = $scope.mode; SideBarService.fn.loader = $service; var $window = $(window); function checkWidth() { var windowsize = $window.width(); $scope.width = windowsize; } // Execute on load checkWidth() // Bind event listener $(window).resize(checkWidth); if ($scope.edition) { SideBarService.ctx.edition = $scope.edition; } SideBarService.fn.scrollCheck = function() { $scope.$emit('thIfScrollCheck'); }; var currentFilter; $scope.$on('$locationChangeSuccess', function() { if (!$location.search().filter) { $scope.filter = 'latest'; } else { $scope.filter = $location.search().filter; if ($scope.filter == 'latest') { $location.search('filter', null); } } if (currentFilter == $scope.filter) { return; } currentFilter = $scope.filter; SideBarService.ctx.filter = $scope.filter; }); $scope.display = SideBarService.getList(); $scope.$watchCollection(function() { return SideBarService.getList(); }, function (n) { $scope.display = n; }); $scope.isActive = SideBarService.isActive; $scope.isExcluded = SideBarService.isExcluded; $scope.loadMore = SideBarService.load; $scope.loading = function() { return SideBarService.ctx.loading; }; TH.on('TapBarStatusChange', function(expanded) { if (expanded) { SideBarService.unblock(); } }) } var WMODEL_DATA = {}; WMODEL_DATA.edition = null; WMODEL_DATA.editionName = ""; WMODEL_DATA.pageSize = 20; WMODEL_DATA.isPreview = false; WMODEL_DATA.editionDate = null; WMODEL_DATA.OPTIONS = {}; WMODEL_DATA.mode = null; TH.installWidgetController('sidebar.content.list', 'sidebarContentList9', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'DEFAULT', data: true}], ' oUhbkSMaaqbcdvVkcC', null); })(); (function() { function controller($scope) { var $window = $(window); function checkWidth() { var windowsize = $window.width(); var $element = $('div.sidebar.sidebarTapBar'); $scope.width = windowsize; if(windowsize <= 1024 && $scope.edition){ $('.fixContentRight').removeClass('fixContentRight'); $('.tap').show(); }else if($scope.edition){ $('.tap').hide(); $('.mainContentRow').addClass('fixContentRight'); $element.removeClass('tapNotExpanded'); $element.addClass('expanded'); } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); } var WMODEL_DATA = {}; WMODEL_DATA.edition = null; WMODEL_DATA.slot = null; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('sidebar.tapBar', 'sidebar', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbkSMadabfWVcC oUhbkSMadabbWQbVkcC', null); })(); (function() { function controller($scope, shareThis, TH$Dialog, TH$Service, $location) { $scope.getEditUrl = function(id, type) { if (!type || type == 'article') { return '/content/' + id + '/edit.html'; } else { return '/dzone/staff/' + type + (type == 'refcard' ? 'z' : 's') + '/' + id + '/edit.html'; } }; $scope.share = function(socialNet, url, title){ shareThis.shareThis(socialNet, url, title); }; // $scope.mailShareLink = function(article) { // return 'mailto:?subject=' + encodeURIComponent(article.header.title) + '&body=Article: ' + encodeURIComponent('https://dzone.com/' + article.header.link); // }; $scope.canDelete = function(article) { return article.canDelete; }; $scope.canPublish = function(article) { return article.canPublish; }; $scope.canEdit = function(article) { return article.canEdit; }; $scope.toggleComments = function(article) { if(!article.isLocked) { TH$Service.action('articles.lockNode', {type: 'node', id: article.id}).then(function(result) { if(result){ article.isLocked = true; TH$Dialog.success('You have disabled all comments for this Article'); }else{ TH$Dialog.error('error','Your requested was denied') } }); }else { TH$Service.action('articles.unlockNode', {type: 'node', id: article.id}).then(function(result) { if(result){ article.isLocked = false; TH$Dialog.success('You have enabled all comments for this Article'); }else{ TH$Dialog.error('error','Your requested was denied') } }); } }; $scope.toggleLimitComments = function (article) { if (!article.isLimited) { TH$Service.action('articles.limitNode', {type: 'node', id: article.id}).then(function (result) { if (result) { article.isLimited = true; TH$Dialog.success('You have limited comments for this Article. Now all comments will go through moderation.'); } else { TH$Dialog.error('error', 'Your requested was denied') } }); } else { TH$Service.action('articles.unlimitNode', {type: 'node', id: article.id}).then(function (result) { if (result) { article.isLimited = false; TH$Dialog.success('You removed the limits for comments on this Article'); } else { TH$Dialog.error('error', 'Your requested was denied') } }); } }; $scope.shareTwitter = function($event, title, url){ $event.preventDefault(); $event.stopPropagation(); var twitter = 'https://twitter.com/intent/tweet'; var link = $location.protocol() + '://' + location.host + url; var ref = location.host; var params = '?text='+title+'&url='+link+'&ref=dzone.com&via=DZone'; var win = window.open(twitter+params, '_blank'); win.focus(); }; $scope.edit = function(link) { TH$Dialog.open({ loadWidget: 'links.postPreview', widgetArgs: { edit: link.id }, size: 'xbig' }).then(function (result) { $scope.link.title = result.title; $scope.link.linkDescription = result.content; $scope.link.thumb = result.thumb; $scope.link.tags = result.topics; }); }; $scope.deleteLink = function(article) { var title = article.title; var type = 'link'; if(article.header){ title = (article.header.type == 'article') ? article.header.title : article.title; type = (article.header.type == 'article') ? 'article' : 'link'; } TH$Dialog.confirm('Do you want to delete "' + title + '"?').then(function() { return TH$Service.action('delete', {type: type, id: article.id}); }).then(function() { article.deleted = true; }); }; } var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('content.commentsSlider', 'contentCommentsSlider8', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbaqbcaibvnWffWVcC', null); })(); (function() { var WMODEL_DATA = {}; WMODEL_DATA.name = "commentsSlider"; WMODEL_DATA.slot = null; WMODEL_DATA.OPTIONS = {"name":"commentsSlider"}; TH.installWidgetController('components.slider', 'componentsSlider7', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhballbvbdSaoUhM', null); })();