CODEWITHSUNDEEP
javascriptjqueryhtmldjango
Din
Din

Reputation: 71

Hide divs and display div when button clicked

I am a total newbie of Jquery and JavaScript. I am using this code as reference: https://jsfiddle.net/6uzU6/2/

What I am trying to do is similar as the link above, which is to display a div after a corresponding button is clicked while others divs are hidden.

I was trying to modify the code to use div instead of unordered list.

The problem I am having right now is when I use Brave Browser to open the page, the divs are not hiding and no changes are made after clicking the button. While using Chrome, the page will be blank, nothing is shown.

tutorialIndex.html

{% extends "morse_logs/base.html" %}

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">

<div class="container">
    <h1>Tutorial</h1>
</div>

<div id="menu">
    <button class="justClick" href="#">A</button>
    <button class="justClick" href="#">B</button>
    <button class="justClick" href="#">C</button>
    <button class="justClick" href="#">D</button>
</div>

<div class="content">

</div>

    <div class="content1">
        <h1>A</h1>
        <img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
    </div>
    <div class="content2">
        <h1>B</h1>
    </div>
    <div class="content3">
        <h1>C</h1>
    </div>
    <div class="content4">
        <h1>D</h1>
    </div>



<script src="{% static 'morse_logs/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'morse_logs/js/jquery-ui/jquery-ui.js' %}"></script>
<script src="{% static 'morse_logs/js/app.js' %}"></script>
{% endblock content %}

app.js

$('div').not(".content").hide();
$('.justClick').bind('click', function() {
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

Upvotes: 1

Views: 58

Answers (2)

ikiK
ikiK

Reputation: 6532

Not sure about your code but here's another way to do it.

Its easy to read and understand...

$(document).ready(function(){
   $(".justClicka").click(function() {
     $(".content1").css("display", "block");
     $(".content2,.content3,.content4").css("display", "none");
   }); 
   $(".justClickb").click(function() {
     $(".content2").css("display", "block");
     $(".content1,.content3,.content4").css("display", "none");
   }); 
   $(".justClickc").click(function() {
     $(".content3").css("display", "block");
     $(".content1,.content2,.content4").css("display", "none");
   }); 
   $(".justClickd").click(function() {
     $(".content4").css("display", "block");
     $(".content1,.content2,.content3").css("display", "none");
   });  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">

<div class="container">
    <h1>Tutorial</h1>
</div>

<div id="menu">
    <button class="justClicka" href="#">A</button>
    <button class="justClickb" href="#">B</button>
    <button class="justClickc" href="#">C</button>
    <button class="justClickd" href="#">D</button>
</div>

<div class="content">

</div>

    <div class="content1"  style="display:none">
        <h1>A</h1>
        <img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
    </div>
    <div class="content2"  style="display:none">
        <h1>B</h1>
    </div>
    <div class="content3"  style="display:none">
        <h1>C</h1>
    </div>
    <div class="content4"  style="display:none">
        <h1>D</h1>
    </div>

Upvotes: 1

Victor
Victor

Reputation: 2919

Page is blank because $('div').not(".content").hide() hides ALL divs except the one with the class="content" including the container and menu divs

Change it to $('div.content ~ div').hide()

Upvotes: 0

Related Questions