"Conceal or reveal content with a toggle

Struggling to implement a simple hide and reveal effect in my JavaScript learning journey. Currently, the effect is only cancelled by clicking on another div with the same reference.

Take a look at my JavaScript code:

var $ = jQuery;

$(document).ready(function(){
    $('.section').hide(); 
});

function showMe(num){
    $('.section').hide(0);   
    $('#div_one'+num).fadeIn(1000); 

}

Reviewing my CSS:

.height-auto
{
    height:auto;
}
.section
{
    width:552px;
    min-height:300px;
}

Check out my HTML: 

<div class="section home-things visible" id="div_one1">

    <div class="section-contents"></div>
</div>

Ideally, I want "javascript:showMe(1)" to toggle "div_one1" and so forth.

Please lend me a hand.

javascriptjqueryhtmlcss

Answer №1

Your current code functions as a show toggle, hiding the element on every call of showMe, then showing it again afterwards.

To simplify and optimize the code, you could consider using jQuery's built-in functions like this:

function showMe(num)
{
    $('#div_one'+num).siblings('.section').hide();
    $('#div_one'+num).fadeToggle();

    // These next two lines may not be needed depending on your requirements
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

If you want to maintain the original logic with a few tweaks, you can use the following approach:

function showMe(num)
{
    if ($('#div_one'+num).is(":visible"))
    { 
        $('#div_one'+num).hide();
    }
    else
    { 
        $('.section').hide(0);
        $('#div_one'+num).fadeIn(1000);
    }

    // Again, these lines may or may not be relevant in your specific case
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

For a demonstration, you can check out this jsFiddle.

Answer №2

Apologies for my tardiness, but I have created this solution specifically for you and am now submitting it as an answer.

$(document).ready(function(){
    $('.content').hide(); 
    $('#box_one1').show();
});

function displayContent(number){
    $('.content').hide();
    $('#box_one'+number).fadeIn(300); 
}

Check out the DEMO here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the size of a canvas and then upload the resized information to a

I need to update the user's database table row data with new resized dimensions (changing width and height). For instance: In my online editor, I create a canvas of size 1000x500, add objects, and save -> This data is sent to the database When re ...

javascriptphpdatabasecanvas

Troubleshooting the issue of not successfully retrieving and sending values from form checkboxes in jQuery to $_POST variable

I am facing an issue with checkboxes that have identical names and use square brackets to create an array. <label> <input type="checkbox" value="Tlocrt objekta" name="dokument[]" > Tlocrt objekta </input> </label> ...

javascriptphpjquerycheckbox

Authentic clear space within a div, showcasing only the background without any text present

My dilemma involves a DIV with a background, text within it, and another FIXED DIV positioned on top of the first DIV with a background. When I apply a color to the FIXED DIV, the text appears behind it. If I don't give a color to the DIV (and want it ...

htmlcss

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

I'm trying to figure out how to filter an ng-repeat function based on the first letter of each option. For example, I want to filter a set of array or string so that only options starting with "A" or "B" are displayed. Can anyone help me with this? H ...

javascripthtmlangularjs

The clash of names between tags and classes in Tumblr themes can cause conflicts

I have discovered a method to customize the style of different posts based on their respective "#tags" using {TagsAsClasses}: <div class="post {TagsAsClasses}"> div.tag { /* customize styling here */ } While this approach works well, I encount ...

htmlcsstumblr

height issue with a div

I currently have a header, master container, and footer set up on my website. Within the master container, I have 2 separate containers: A on the left and B on the right. Even as the B container gets filled up, the A container remains static. Is there a ...

css

How is it possible for a parameter sent via GET to persist through multiple requests?

Within my JSP file, I have implemented an HTML form that utilizes the GET method to send data to my servlet. <form method="GET"> <input name="cmd" type="hidden" value="firstValue"/> ..... </form> Upon triggering another form ...

htmlhttpjspservlets

Converting HTML5 FormData object to raw payload using frontend javascript: A Step-by-Step Guide

Can anyone help me with extracting the entire POST request payload stream in my browser side script? I am facing difficulty when the body is a FormData object, especially containing a file blob. Is there a convenient way to achieve this? The main purpos ...

javascripthtmlnpmecmascript-6multipartform-data

Enhancing the appearance of buttons with hover effects in Twitter Bootstrap

I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead. Although I checked the Buttons Less variables, I couldn't find an option specifically ...

csstwitter-bootstraptwitter-bootstrap-3sass

show a blob within an image element using JavaScript

I have a blob file retrieved from mySql and it looks like the image you see below. https://i.sstatic.net/DkLbh.png Now, I want to display this image using the <img src={imagefile}/> tag in React.js. How can I convert the blob file to a URL link? I ...

javascriptreactjsblob

Switch up the background image when hovering over it

Could the proportions of the image be contributing to the issue at hand? #menu { background: black; width: 100%; height: 45px; } #menu ul { text-decoration: none; list-style-type: none; } #menu li { text-decoration: none; display: inline; font-size: ...

htmlcsslist

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

Obtaining a JSON reply using Ember

Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...

javascriptjqueryajaxjsonember.js

What could be causing the Bootstrap div.navbar to appear in Safari but not in Firefox or Chrome while using the collapsednav feature?

Encountering a strange issue with Bootstrap here! Despite trying various solutions, I can't seem to get rid of the navbar navbar-default showing below Bootstrap's nav toggle in Safari. Strangely, it doesn't appear in Firefox or Chrome. I rea ...

htmlcsstwitter-bootstrapnav

Padding issues in navbar-expand for Bootstrap 4

I'm encountering a strange issue with padding in my navbar that seems to be dependent on the navbar-expand property. For instance, when I set it to MD, it appears like this: https://i.sstatic.net/czytc.png As you can see, the logo and menu button d ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Enhance your website by adding a <select> element using an AJAX call that

Encountering challenges in dynamically generating <select> elements and then populating them with values from an XML file. The jQuery script appends a <div> containing a select element and adds options based on the data obtained from XML. Thi ...

jqueryhtmlxmlajax

AJax and MVC: Elevating Your File Uploading Experience

I have come across numerous examples of file uploading, but most of them involve using forms or stand alone file uploads where only the file itself is passed. Currently, I have a page that sends data to a controller via Ajax. Now, I want to incorporate a ...

c#jqueryasp.net-mvc

Mastering Backbone views and router functionality is essential for building scalable and efficient web

In my code, I have a series of page states that mimic the steps of a shopping cart checkout process. The first set of code sets up the ItemsCollection, ItemsView, and ItemsApp in Backbone.js. var ItemsCollection = Backbone.Collection.extend({ model: I ...

javascriptbackbone.jslaw-of-demeter

Is the concept of LinkedList index applicable in the field of Data Structures and Algorithms (DSA)?

Is there an index feature in LinkedList that allows for accessing elements like in arrays? If so, can you explain how the indexing works within the LinkedList concept? Thank you I am new to LinkedList and would like to grasp the fundamental concept behin ...

javascriptnode.jsarrayslinked-listmern

Identifying Symbian OS gadgets using JavaScript or CSS

I've been working on enhancing a website for Symbian OS, and while using media queries, I've noticed that Symbian OS doesn't support them. Is there a method to identify if the website is being accessed from a Symbian device and then load spe ...

javascriptjquerycsssymbian