Collapsible Sections in BookStack

Learn how to create expandable/collapsible content sections.

Method 1: HTML Details/Summary (Recommended)

Basic Collapsible Section

📋 Example Response

{
  "success": true,
  "data": [
    {
      "id": 123,
      "email": "user@qbitspark.com",
      "name": "John Doe",
      "status": "active",
      "created_at": "2024-01-15T10:30:00Z",
      "projects": [
        {
          "id": 456,
          "name": "E-commerce Site",
          "status": "active"
        }
      ]
    }
  ],
  "pagination": {
    "current_page": 1,
    "total_pages": 5,
    "total_users": 87
  }
}

Collapsible Code Examples

💻 Code Examples

JavaScript

const response = await fetch('https://doc-hub.qbitspark.com/api/users', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
});

const users = await response.json();
console.log('Total users:', users.data.length);

Python

import requests

headers = {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
}

response = requests.get('https://doc-hub.qbitspark.com/api/users', headers=headers)
users = response.json()

print(f"Found {len(users['data'])} users")

cURL

curl -X GET https://doc-hub.qbitspark.com/api/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

Collapsible Error Details

❌ Error Responses

400 Bad Request

{
  "success": false,
  "error": "validation_failed",
  "message": "Email is required",
  "details": {
    "field": "email",
    "code": "MISSING_REQUIRED_FIELD"
  }
}

401 Unauthorized

{
  "success": false,
  "error": "unauthorized",
  "message": "Invalid API key provided"
}

429 Rate Limited

{
  "success": false,
  "error": "rate_limit_exceeded",
  "message": "Rate limit exceeded. Try again in 60 seconds.",
  "retry_after": 60
}

Method 2: Styled Collapsible Sections

Custom Styled Collapsible

🔧 Advanced Configuration Options

Environment Variables:

API_TIMEOUT - Request timeout in seconds (default: 30)
MAX_RETRIES - Maximum retry attempts (default: 3)
LOG_LEVEL - Logging verbosity: debug, info, warn, error

Database Settings:

DB_POOL_SIZE - Connection pool size (default: 10)
DB_TIMEOUT - Query timeout in milliseconds (default: 5000)

Cache Configuration:

CACHE_TTL - Cache time-to-live in seconds (default: 3600)
CACHE_SIZE - Maximum cache entries (default: 1000)

Method 3: Multiple Collapsible Sections

API Endpoint Details

🟢 GET /api/users - List Users

Description: Retrieve a paginated list of users

Parameters:

Name	Type	Required	Description
`page`	integer	No	Page number (default: 1)
`limit`	integer	No	Items per page (max: 100)
`search`	string	No	Search by name or email

Example Request:

GET https://doc-hub.qbitspark.com/api/users?page=1&limit=20&search=john

🟠 POST /api/users - Create User

Description: Create a new user account

Request Body:

{
  "email": "user@example.com",
  "name": "John Doe",
  "role": "developer",
  "department": "Engineering"
}

Response:

{
  "success": true,
  "user": {
    "id": 123,
    "email": "user@example.com",
    "name": "John Doe",
    "status": "pending"
  }
}

🔵 PUT /api/users/{id} - Update User

Description: Update an existing user's information

Path Parameters:

id - User ID (integer, required)

Request Body: (partial update supported)

{
  "name": "Jane Doe",
  "status": "active",
  "role": "senior_developer"
}

🔴 DELETE /api/users/{id} - Delete User

Description: Permanently remove a user account

⚠️ Warning: This action cannot be undone!

Path Parameters:

id - User ID (integer, required)

Response:

{
  "success": true,
  "message": "User deleted successfully",
  "deleted_user_id": 123
}

Method 4: FAQ Style Collapsibles

Frequently Asked Questions

❓ How do I get an API key?

Log into your QbitSpark dashboard
Navigate to Settings → API Keys
Click "Generate New Key"
Copy and store your key securely
Use it in the Authorization: Bearer YOUR_KEY header

❓ What are the rate limits?

Rate limits depend on your plan:

Free Plan: 1,000 requests per day
Pro Plan: 10,000 requests per day
Enterprise: Unlimited requests

Rate limit headers are included in all responses:

X-RateLimit-Limit - Your rate limit
X-RateLimit-Remaining - Requests remaining
X-RateLimit-Reset - Unix timestamp when limit resets

❓ How do I handle errors?

All errors follow a consistent format:

{
  "success": false,
  "error": "error_code",
  "message": "Human readable error message",
  "details": {
    "additional": "context information"
  }
}

Best Practices:

Always check the success field
Log the error code for debugging
Display the message to users
Use details for additional context

Method 5: Nested Collapsible Sections

Advanced API Features

🔧 Advanced Features

📡 Webhooks

Configure webhooks to receive real-time notifications:

{
  "url": "https://your-app.com/webhook",
  "events": ["user.created", "user.updated"],
  "secret": "webhook_secret_key"
}

Supported Events:

user.created - New user registered
user.updated - User information changed
user.deleted - User account removed

📊 Analytics

Access detailed usage analytics:

GET /api/analytics/usage?period=30d

Available Metrics:

API request volume
Response time percentiles
Error rate analysis
Geographic distribution

🔐 Authentication Methods

We support multiple authentication methods:

API Keys (recommended for server-to-server)
OAuth 2.0 (for user-facing applications)
JWT Tokens (for temporary access)

Pro Tips for Collapsible Content

💡 Best Practices:

Use clear, descriptive summary text

Keep collapsed content organized and scannable

Use emojis or icons for visual hierarchy

Don't nest too deeply (max 2-3 levels)

Group related information together

🎨 Styling Tips:

Add CSS styling to make sections stand out

Use consistent formatting across all collapsible sections

Consider using colors to indicate content type (green=success, red=errors, blue=info)

Copy any of these examples and customize them for your documentation! 📚